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);
})