nprogress插件 进度条

一、安装依赖

npm install nprogress -S

二、引入进度条 NProgress 及对应样式（request.js 文件中）

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'

三、使用

// 请求拦截器
instance.interceptors.request.use(
  config => {
    // 在 request 拦截器中，展示进度条 NProgress.start()
    NProgress.start()
    if (sessionStorage.getItem('token')) {
	  config.headers.Authorization = sessionStorage.getItem('token')
    }
	return config
  },
  err => {
    return Promise.reject(err)
  }
)

// 响应拦截器
instance.interceptors.response.use(
  res => {
    // 在 response 拦截器中，隐藏进度条 NProgress.done()
	NProgress.done()
	if (res.status === 200) {
	  return Promise.resolve(res.data)
	} else {
	  return Promise.reject(res)
	}
  },
  err => {
    return Promise.reject(err)
  }
)