插件——nprogress进度条

nprogress进度条插件

• 需求：打开一个页面时，往往会伴随一些请求，并且会在页面上方出现进度条。

• 原理：在我们发起请求的时候开启进度条，在请求成功后关闭进度条

• 实现：所以只需要在request.js中进行配置，在页面加载时发起了一个请求，此时页面上方出现蓝色进度条，收到响应数据后关闭进度条。在拦截器加。

1、安装

npm install nprogress --save

2、对应的request.js设置

• starte() 进度条开始。donee()进度条结束

• 可以通过修改nprogress.css文件的background来修改进度条颜色。

import axios from "axios";
//引入进度条
import nprogress from 'nprogress';
//引入进度条样式
import "nprogress/nprogress.css";
//1、对axios二次封装
const requests = axios.create({
    //基础路径，requests发出的请求在端口号后面会跟改baseURl
    baseURL:'/api',
    timeout: 5000,
})
//2、配置请求拦截器
requests.interceptors.request.use(config => {
    //config内主要是对请求头Header配置
    //比如添加token

    //开启进度条
    nprogress.start();
    return config;

})
//3、配置相应拦截器
requests.interceptors.response.use((res) => {
    //成功的回调函数

    //响应成功，关闭进度条
    nprogress.done()
    return  res.data;

},(error) => {
    //失败的回调函数
    console.log("响应失败"+error)
    return Promise.reject(new Error('fail'))
})
//4、对外暴露
export default requests;