打开一个页面时，往往会伴随一些请求，并且会在页面上方出现进度条。它的原理时，在我们发起请求的时候开启进度条，在请求成功后关闭进度条，所以只需要在request.js中进行配置。
如下图所示，我们页面加载时发起了一个请求，此时页面上方出现蓝色进度条
1.安装
2.使用
import axios from "axios";
//引入进度条
import nprogress from "nprogress";
//引入进度条样式
import "nprogress/nprogress.css"
//1、对axios进行二次封装
//利用axios对象的方法creach ,创建一个axios实例
const requests = axios.create({//基础路径，requests发出的请求在端口号后面会跟改baseURlbaseURL: '/api',timeout: 5000,
})
//2、配置请求拦截器
requests.interceptors.request.use(config => {//config内主要是对请求头Header配置//进度条开始nprogress.start()return config;})
//3、配置相应拦截器
requests.interceptors.response.use((res) => {//成功的回调函数//进度条结束nprogress.done()return res.data;
}, (error) => {//失败的回调函数console.log("响应失败" + error)return Promise.reject(new Error('faile'))
})
//4、对外暴露
export default requests;
3.可以通过修改nprogress.css文件的background来修改进度条颜色。
#nprogress .bar {background: rgb(47, 221, 34);position: fixed;z-index: 1031;top: 0;left: 0;width: 100%;height: 2px;
}
