一,安装 npm install nprogress --save
npm install nprogress --save
二,在需要使用的页面引入 这里也要引入axios 在请求拦截器的时候使用
//引入进度条
import nprogress from 'nprogress';
//引入进度条样式
import "nprogress/nprogress.css";
//引入进度条的时候也要引入axios
import axios from "axios";
三,在created中配置请求拦截器
// 请求拦截器
created() {
axios.interceptors.request.use((config) => {
// 进度条开始动
nprogress.start();
return config;
});
// 响应拦截器
axios.interceptors.response.use(
(config) => {
//res:实质就是项目中发请求、服务器返回的数据
//进度条结束
nprogress.done();
return config;
},
(err) => {
//温馨提示:某一天发请求,请求失败,请求失败的信息打印出来
alert(err.message);
//终止Promise链
return new Promise();
}
);
},