Vue通过 nprogress 添加请求进度条

案例

• 当我们在页面中发起请求的时候，如果网络很差或者后台处理慢，没有及时的响应，用户在页面中就不知道请求到底是发送成功了还是发送失败了
• 这个时候，我们可以使用 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
})