NProgress
一、具体步骤
1. 安装依赖
npm install --save nprogress
2. 在main.js
中导入 js、css
3. 在main.js
拦截器中配置, 展示/隐藏进度条
二、关键代码
// 导入进度条NProgess 的对应的js、css
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// 添加 request 请求拦截器 - 展示进度条 NProgress.start()
axios.interceptors.request.use(function (config) {
NProgress.start()
// 在发送请求之前做些什么
return config
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error)
})
// 添加 response 响应拦截器 - 隐藏进度条 NProgress.done
axios.interceptors.response.use(function (response) {
NProgress.done
// 对响应数据做点什么
return response
}, function (error) {
// 对响应错误做点什么
return Promise.reject(error)
})