案例
- 当我们在页面中发起请求的时候,如果网络很差或者后台处理慢,没有及时的响应,用户在页面中就不知道请求到底是发送成功了还是发送失败了
- 这个时候,我们可以使用
nprogress
插件,在页面中添加请求进度条 - 预览图
使用方法
- 安装依赖
main.js
文件导入
// 导入请求进度条组件和样式
import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
- 调用
NProgress.start()
和NProgress.done()
两个方法 - 这里直接通过 axios 拦截器来调用,当发起请求的时候调用 start 方法,当接收响应的时候调用 done 方法
// axios 请求拦截器 发起请求就会触发
axios.interceptors.request.use(config => {
// 发起请求则展示进度条
NProgress.start()
// 必须要返回config
return config;
})
// 请求有response后则触发
axios.interceptors.response.use(config => {
// 请求结束则结束进度条
NProgress.done()
// 必须要返回config
return config
})