安装
cnpm install --save nprogress
去package.json文件查看是否安装成功
使用
项目中只要有请求,即可使用。
在请求拦截器中使用
///对于axios进行二次封装
import axios from "axios";
//引入进度条
import nProgress from "nprogress";
//start:进度条开始;done:进度条结束
//引入进度条的样式
import "nprogress/nprogress.css"
//1:利用axios对象的方法create:去创建一个axios实例
//2:request就是axios,只不过稍微配置一下
const requests = axios.create({
//配置对象
//基础路径,发请求时,路径当中会出现api
baseURL:"/api",
timeout:5000,
});
//请求拦截器:在发请求之前,请求拦截器可以检测到,可以再请求之前做一些事情
requests.interceptors.request.use((config)=>{
//config:配置对象,对象里面有一个属性很重要,header请求头
//进度条开始动
nProgress.start();
return config;
});
//响应拦截器
requests.interceptors.response.use((res)=>{
//成功的回调函数:服务器响应数据回来以后,响应拦截器可以检测到,可以以做一些事情
//进度条结束
nProgress.done();
return res.data;
},(error)=>{
return Promise.reject(new Error('faile'));
});
//对外暴露
export default requests;
修改进度条样式
安装后,修改代码位置