zoukankan      html  css  js  c++  java
  • 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);
    })
    
    
  • 相关阅读:
    了解委托(Delegate)
    C#中事件的一些总结
    Devexpress Xtrareport 并排报表
    Xtrareport 交叉报表
    Xtrareport 多栏报表
    Xtrareport 报表的一些属性及控件
    UI前端开发都是做什么的以及html、css、php、js等究竟是神马关系
    url,href,src之间的区别
    join()的用法
    爬取百度百科
  • 原文地址:https://www.cnblogs.com/lafitewu/p/14511415.html
Copyright © 2011-2022 走看看