一，利用npm 官网的nprogress

// axios 的二次封装
import axios from 'axios'
//下面可以是任意插件 我们以进度条为例 二次封装一个请求过程中自动出现进度条的案例
import Nprogress from 'nprogress'
import "nprogress/nprogress.css"

// 刚刚发起请求的时候先拦截一下
// 必须在拦截器中return config
axios.interceptors.request.use((config) => {
	//进度条开启
    Nprogress.start()
    // config 是请求前配置的内容
    return config
})

// 响应结果后拦截一下
axios.interceptors.response.use((data) => {
	//进度条关闭
    Nprogress.done()
    //data 是返回的请求结果 如果自定义输入 请求返回就为自定义值
    return data
})

export default axios

二，使用element ui 的loading 组件，添加请求接口的loading 效果

.安装element-ui; 打开官网 ： https://element.eleme.cn/2.13/#/zh-CN/component/installation

 安装 npm i element-ui -S  按需引入 npm install babel-plugin-component -D

按照官网步骤来

  项目的根目录下面添加.balelrc文件，在文件内添加下面的代码

  {

  "plugins":[

    [

      "component",

      {

        "libraryName": "element-ui",

        "styleLibraryName": "theme-chalk"

      }

    ]

  ]

}

import axios from "axios";
import { Loading } from 'element-ui';
import router from '../router/index.js'
const instance = axios.create({
    baseURL: '',
    timeout: 5000,
  });

  let loadingInstance =null;
  // 添加请求拦截器
  instance.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    loadingInstance = Loading.service({
        text:'正在加载中。。。。。'
    });
  const token=localStorage.getItem('token');
  if(token){
    config.headers.Authorization='Bearer '+token;
  }
    return config;
  }, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
  });

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
    // 2xx 范围内的状态码都会触发该函数。
    // 对响应数据做点什么?
    loadingInstance?.close();
    return response;
  }, function (error) {
    // 超出 2xx 范围的状态码都会触发该函数。
    // 对响应错误做点什么
    loadingInstance?.close();
    const status=error.response.status;
    if(status==404){
    router.push('/qwer',()=>{},()=>{});
      return error.response
    }
    if(status==401){
      alert('token已失效或者是token被篡改了')
      router.push('/login',()=>{},()=>{});
      return error.response;
    }
    return Promise.reject(error);
  });
  export default instance