NProgress在拦截器中使用

使用场景,最近在vue拦截器中使用NProgress发现满足不了我的需求,因为一个页面中不止一个接口,每调用一次接口,NProgress顶部动画就会加载一次,那么同一个页面如果调用了5个接口,那动画就会执行五次,怎么办?

1.网上常规使用场景是在拦截器request.use函数中加上NProgress.start(),在response.use函数中加NProgress.done(),这样就会出现我上面描述所出现的问题。

2.怎么解决呢?定义两个变量,用来记录发出请求的次数和响应次数,在response.use函数中判断两个变量是否相等,如果相等,那就执行NProgress.done()。完美解决~

详细代码如下:

let request_indexs = 0  //初始化请求次数
let response_indexs = 0 //初始化响应次数
// 通过判断响应次数和初始次数相等时,结束NProgress

// 添加请求拦截器
httpInstance.interceptors.request.use(function (config) {
    request_indexs++
    NProgress.start()
    return config;

}, function (error) {
    return Promise.reject(error);
})

// 添加响应拦截器
httpInstance.interceptors.response.use(function (response) {
    response_indexs ++
    if(response_indexs == request_indexs) {
        NProgress.done()
    }
   	return response;

}, function (error) {
   return Promise.reject(error);
})

posted @ 2021-03-10 14:23  Lafitewu  阅读(9)  评论(0编辑  收藏