8、nprogress进度条插件

1、安装

 npm install --save nprogress

2、使用 在【request.js】文件中，请求开始前加载进度条；响应结束后结束进度条

// 引入进度条
import nprogress from 'nprogress'
// 引入进度条的样式
import 'nprogress/nprogress.css'

// 在请求拦截器中使用进度条插件
requests.interceptors.request.use(config=>{
    // console.log(nprogress);

    // start方法代表进度条开始
    nprogress.start()

    return config
})

requests.interceptors.response.use(res=>{
    // 成功的回调函数。服务器响应数据回来后，响应拦截器可以监测到，可以做一些事情
    // done表示进度条结束
    nprogress.done();
    return res.data
},err=>{
    // 服务器响应失败的回调函数
    return Promise.reject(new Error(err))
})
export default requests

3、修改进度条的样式

在【node_modules——nprogress——nprogress.css】文件修改

#nprogress .bar {
  /*  设置进度条的颜色 */
  background: #29d;
}