优化——通过nprogress添加进度条效果

优化——通过nprogress添加进度条效果

一、官网

官方网址：https://madewith.cn/23

二、使用

1、安装

npm install --save nprogress

2、在main.js导入Nprogress包对应的js和css

import Nprogress from 'nprogress'

import 'nprogress/nprogress.css'

3、在request拦截器中展示进度条

//配置请求的根路径
axios.defaults.baseURL = 'http://127.0.0.1:8888/api/private/v1/'
// 在request拦截器中展示进度条Nprogress.start()
axios.interceptors.request.use(config => {
    Nprogress.start()
    config.headers.Authorization = window.sessionStorage.getItem('token');
    //在最后必须return config
    return config
})

在request拦截器中隐藏进度条Nprogress.done()

// 在response拦截器中隐藏进度条Nprogress.done()

axios.interceptors.response.use(config => {
   Nprogress.done()
    return config

})