nprogress 详细教程及代码

官网地址
https://ricostacruz.com/nprogress/
安装命令

$ npm install --save nprogress

使用方法

NProgress.start()
NProgress.done()

在axios 拦截时使用

import NProgress from 'nprogress'
import 'nprogress/nprogress.css'
// 创建axios实例s
// 创建请求时可以用的配置选项
let instance = axios.create({
  timeout: 40000,
  baseURL: process.env.VUE_APP_API // api 的 base_url
})

// axios的全局配置
instance.defaults.headers.post['Content-Type'] = 'application/json;charset=UTF-8'
// instance.defaults.headers.common['Authorization'] = localStorage.getItem('sessionKey')

// 添加请求拦截器(post只能接受字符串类型数据)
instance.interceptors.request.use(
  function (config) {
    NProgress.start()
    if (config) {
      // config.data = qs.stringify(config.data)

      config.headers.Authorization = window.sessionStorage.getItem('sessionKey')
    }
    return config
  },
  function (error) {
    return Promise.reject(error)
  }
)

// 添加响应拦截器
instance.interceptors.response.use(
  // 响应包含以下信息data,status,statusText,headers,config
  res => {
    if (res.status === 200) {
      NProgress.done()
      return res
    }
  },
  err => {
    NProgress.done()
    console.log(err)
    const { response } = err
    // console.log(response)
    if (response) {
      errorHandle(response.status, response.data)
      return Promise.reject(response)
    } else {
      console.log('请求失败')
    }
  }
)
const errorHandle = (status, other) => {
  switch (status) {
    case 400:
      console.log('信息校验失败')
      break
    case 401:
      console.log('认证失败')
      break
    case 403:
      console.log('token校验失败')
      break
    case 404:
      console.log('请求的资源不存在')
      break
    default:
      console.log(other)
      break
  }
}
export default instance

也可以在路由守卫是使用

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

router.beforeEach((to, from, next) => {
  NProgress.start()
  next()
})

router.afterEach(() => {
  NProgress.done()
})