开发中把Axios进行二次封装，可以更好的使用Axios的请求拦截器，以及响应拦截器去处理数据

实现代码如下 新建/api/request.js：

/* 对axios进行二次封装 */
import axios from "axios";
// 引入进度条 start 进度条开始  done进度条结束
import nprogress from "nprogress";
//引入 进度条样式
import "nprogress/nprogress.css"

//1. 利用axios对象的方法create方法去创建一个axios实例
// request就是axios,只不过稍微配置一下
const request = axios.create({
    // 基础路径：发请求的时候，路径中会带有api
    baseURL:'/api',
    //代表请求超时的时间为5s
    timeout:5000,
})

// 配置请求拦截器,在请求发出去之前，拦截器可以监测到，可以在请求发出之前做一些事情
 request.interceptors.request.use((config)=>{
    //config 是一个配置对象，对象里有一个属性很重要，就是header请求头
    nprogress.start();
    return config;
 })

 // 响应拦截器
 request.interceptors.response.use((res)=>{
    //响应成功的回调函数，服务器响应数据回来以后，可以做一些事情
    nprogress.done();
    return res.data;
 },(error)=>{
    //响应失败的回调函数
    return error.msg
 })

 export default request;

现在其实以及封装完毕了，需要用的时候可以直接引入使用，但是都做到这一步了，干脆在做个api统一管理 /api/index

//该模块对所有的api进行统一管理

import request from "./request";

// 三级联动接口 get /api/product/getBaseCategoryList 无参数
export const reqCategoryList = ()=>{
    //发送请求，axios返回的结果是Promiss对象
    return request({url:'/product/getBaseCategoryList',method:'get'})
}

使用方法，因为本项目使用了vuex状态管理，所以在需要请求的时候，直接dispatch给action，不使用vuex可以直接调用接口函数即可

    mounted(){
      //通知vuex发请求，获取数据，存储与仓库当中
      this.$store.dispatch('categoryList');
    },

在action中处理:

import {reqCategoryList} from "@/api";

//actions 处理actions,可以写自己的业务，也可以处理异步
const actions = {
    //通过api接口向服务器发送请求
    async categoryList(commit){
        let result = await reqCategoryList();//发送请求
        //commit 向state提交数据，提交的数据就是获取到的数据
        if(result.code == 200){
            this.commit('CATEGORYLIST',result.data)
        }
    }
};

解决请求跨域问题，使用代理服务器

    //代理跨域  只有浏览器有跨域问题  服务器之间没有
    devServer: {
        proxy: {
            '/api':{
                target:'http://39.98.123.211',
                //这里路径不需要重写，因为请求服务器上的路径就带api
                //pathRewrite: { '^/api':''},
            }
        }
    }

文中代码进度条的实现，其实也算是请求拦截器、响应拦截器的使用了。同理动态加载动画也可以通过这种方式实现