VUE项目--nprogress进度条

安装

npm install --save nprogress

引入

在src/api/requests.js文件中引入

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

基本用法

nprogress.start(); //开始
nprogress.done(); //结束

在requests.js中–——在请求拦截器和响应拦截器中使用：

// 请求拦截器：在发送请求之前，请求拦截器可以检测到，在请求发送之前处理一些事情
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('faile'))
})