使用nprogress实现请求进度条

一、安装nprogress

npm i nprogress

二、 在axios的请求拦截器中使用nprogress

如果对于axios的请求和响应拦截器的使用不了解的，可以看这篇文章：

axios二次封装配置请求拦截器和响应拦截器-CSDN博客

nprogress上有两个有用的方法：

star() 方法用于开启进度条

done() 方法用于关闭进度条

我们只要在请求拦截器中开启进度条，在响应拦截器中关闭进度条即可：

// 引入nprogress 对象和样式
import nProgress from "nprogress";
import "../../node_modules/nprogress/nprogress.css";

const requestObj = axios.create({
    baseURL: "/api",
    timeout: 5000
});

// 请求拦截器
requestObj.interceptors.request.use((config) => {
    // 开启进度条样式
    nProgress.start();
    return config;
})

// 响应拦截器
requestObj.interceptors.response.use((res) => {
    // 关闭进度条样式
    nProgress.done();
    return res.data;
}, (error) => {
    return Promise.reject(new Error('faile'));
})

配置完成后，我们刷新页面就会有一条蓝色的进度条：

 

三、修改进度条颜色

直接在node_modules/nprogress/nprogress.css 中修改样式即可：