NProgress加载进度条安装使用教程

NProgress 使用

官网地址：https://ricostacruz.com/nprogress/

使用NProgress后的效果显示

1. 安装

npm install --save nprogerss

2.使用（在请求接口的request.js文件引用）

import Nprogress from 'nprogress'
import 'nprogress/nprogress.css'

3.在 request 请求拦截器中，展示进度条 NProgress.start()

  Nprogress.start()  //开启进度条命令

在request拦截中使用

// axios  request请求拦截器
axios.interceptors.request.use(config => {
  Nprogress.start()  //开启进度条命令
  config.headers.Authorization = window.sessionStorage.getItem('token')
  // 在最后必须 return config
  return config
})

在 response 响应拦截器中，隐藏进度条 NProgress.done()

Nprogress.done()  //关闭进度条

在response中使用

axios.interceptors.response.use(config => {
Nprogress.done()   //关闭进度条
return config
})