axios的二次封装

创建vue项目安装axios

npm i axios -S

安装进度条插件

npm i nprogress -S

在src目录下创建一个名为api的目录，在api目录下创建一个request.js脚本。并设置进度条

//对axios进行二次封装
import axios from 'axios'
//引入进度条
import nprogress from 'nprogress'
//引入进度条样式
import 'nprogress/nprogress.css'
//start:进度条开始 done:进度条结束
// console.log(nprogress);

// 1.利用axios对象的方法create，去创建一个axios实例
// 2.requests就是axios 只不过稍微配置一下
const requests = axios.create({
        //配置对象
        // 基础路径，发起请求的时候，路径中会出现api
        baseURL: "/api",
        // 代表请求超时的时间5s
        timeout: 5000,
    })
    // 请求拦截器：发起请求之前,请求拦截器可以检测到,可以在请求发出去之前做一些事
requests.interceptors.request.use((config) => {
    // config:配置对象,对象里面有一个属性很重要,headers请求头
    //进度条开始动
    nprogress.start()
    return config
})

//响应拦截器
requests.interceptors.response.use((res) => {
    // 成功的回调函数:服务器响应数据回来以后,响应拦截器可以检测到,做一些事情
    //进度条结束
    nprogress.done()
    return res.data
}, (error) => {
    // 响应失败的回调函数
    return Promise.reject(new Error('请求失败了'))
})

// 对外暴露
export default requests

api接口的统一管理

为什么api接口的需要统一管理？

小项目：如果api接口只有一两个，完全可以在组件的生命周期created或者mounted里面发起axios请求。大项目：组件成百上千，层层依赖，单单接口就有几十个，而再利用生命周期发起请求就有点捉襟见肘了，为了方便后期的管理和维护，所以需要进行api接口的统一管理。

*** 作 

在api目录下创建一个index.js脚本。

//当前模块对api接口进行统一管理
import requests from './request'

//例如，需要调用以下接口
// /api/product / getBaseCategoryList   get请求  无参数
// 发请求:axios发请求返回的是Promise对象
export const reqCategoryList = () => {
    //发请求
    return requests({ url: '/product/getBaseCategoryList', methods: 'get' })
}

此时，页面会报错，涉及到跨域问题

跨域问题 

当协议、域名、端口号不同时，发起请求，称之为跨域

例如：

http://localhost:8080/#/    -------前端项目本地服务器
http://gmall-h5-api.atguigu.cn      -----后台服务器

 解决办法：JSONP、CROS、代理服务器

使用代理服务器解决，找到vue.config.js

const { defineConfig } = require('@vue/cli-service')
module.exports = defineConfig({
    transpileDependencies: true,
    //关闭eslint
    lintOnSave: false,
    // 代理跨域
    devServer: {
        proxy: {
            "/api": {
                target: "http://gmall-h5-api.atguigu.cn",//target:需要指向服务器的IP，而不是本地
                pathRewrite: { '^/api': '' }, //路径重新可以不需要，接口本身带/api
                
            }
        }
    }
})

注意 ：配置了vue.config.js需要重启服务 

npm run serve