利用nprogress实现一个页面请求加载效果

首先安装nprogress插件

npm i--save nprogress

对请求器进行一个封装，在拦截器里面进行调用，并引入nprogress

import axios from "axios";
import nprogress from "nprogress";
// 引入进度条样式
import 'nprogress/nprogress.css'
const baseURL = '*****';

const instance = axios.create({
  // 基础地址
  baseURL,
  // 默认超时的时间
  timeout: 5000
})

// 请求拦截
instance.interceptors.request.use(config => {
  // 拿到请求头
  // config.headers.token = localStorage.getItem('token')
  // 进度条开始动
  nprogress.start();


  return config
}, err => {
  // 打印错误值
  return Promise.reject(err)
})

// 响应拦截
instance.interceptors.response.use(
  res => {
    nprogress.done();
    return res
  },
)

// 整体导出
export default instance

之后再请求页面就可以看到头部有一个蓝色的条了