Vue 项目优化——使用nprogress添加进度条

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)
})