axios请求打包,取消上一次重复点击

时间:?2021-09-10阅读:?194标签:?axios

使唤场景

重复点击或者多tab标签使唤一个视图等(当然也可以用加载中遮罩层禁止请求中再次微笑点击)

打包代码

来自于互联网络

let pending = []; //声明一个数组用于存储每个请求的取消函数和axios标识
let cancelToken = axios.CancelToken;
let removePending = (config) => {
    for(let p in pending){
        if(pending[p].u === config.url + '&' + config.method) { //当当前请求在数组中存在时执行函数体
            pending[p].f(); //执行取消操作
            pending.splice(p, 1); 
        }
    }
}



// http请求拦截器
axios.interceptors.request.use(config => {

    removePending(config); //在一个axios发送前执行一下取消操作
    config.cancelToken = new cancelToken((c)=>{
        // 这里的axios标识我是用请求地址&请求方式拼凑的字符串,当然你可以选择其他的一些方式
        pending.push({ u: config.url + '&' + config.method, f: c });  
    });
    
    return Promise.resolve(config)
}, error => {
    return Promise.reject(error)
})

// http响应拦截器
axios.interceptors.response.use(data => { 
    
    removePending(data.config);  //在一个axios响应后再执行一下取消操作,把早就不负众望的请求从pending中移除
    
    return Promise.resolve(data)
    
}, error => {
    //加载失败
    return {'data':{}}
    // return Promise.reject(error)
})

经过多次测试发现不同请求也给我取消了,尿酸偏高的原因是没有校验说来get请求可以用。修改以下代码

pending.push({ u: config.url + '&' + config.method, f: c }); 

修改为:

pending.push({ u: config.url + jsON.stringify(config.data) +'&' + config.method, f: c });//config.data为请求参数

上面判断也需要修改,这样get请求和post都可以用了


解决剖解

官方提供了axios.CancelToken来取消上一次请求方法,因此只需要判断上一次请求是否重复。声明数组变量 pending用于存储每个请求实例的axios标识(请求方式。请求url)和该实例的取消函数;在请求拦截器中创建取消函数实例,将请求的标识(判断重复标识)及 该请求实例取消函数 push到pending数组中,创建取消上一次请求方法 removePending,该方法主要判断axios请求标识是否重复。重复则执行该实例的取消函数,并且从 pending中移除标识及该实例取消函数。

整机代码

let pending = []; //声明一个数组用于存储每个请求的取消函数和axios标识
let cancelToken = axios.CancelToken;
let removePending = (config) => {
    for(let p in pending){
        if(pending[p].u === config.url + jsON.stringify(config.data) + '&' + config.method) { //当当前请求在数组中存在时执行函数体
            pending[p].f(); //执行取消操作
            pending.splice(p, 1); 
        }
    }
}

// http请求拦截器
axios.interceptors.request.use(config => {

    removePending(config); //在一个axios发送前执行一下取消操作
    config.cancelToken = new cancelToken((c)=>{
        // 这里的axios标识我是用请求地址&请求方式拼凑的字符串。当然你可以选择其他的一些方式
        pending.push({ u: config.url + '&' + config.method, f: c });  
    });
    
    return Promise.resolve(config)
}, error => {
    return Promise.reject(error)
})

// http响应拦截器
axios.interceptors.response.use(data => { 
    
    removePending(data.config);  //在一个axios响应后再执行一下取消操作。把早就不负众望的请求从pending中移除
    
    return Promise.resolve(data)
    
}, error => {
    //加载失败
    return {'data':{}}
    // return Promise.reject(error)
})
站长推荐

1.云服务推荐: 国内主流cpu云投资商。各类云产品的问道。淘宝优惠券怎么设置领取。地址:阿里云腾讯云华为云

链接: http://www.pannellisolari.net/article/detial/10657

axios处理Http请求的基本使唤方法总汇

axios的功能特性:在冷却器中发送 XMLHttpRequests 请求,在 node.js 中发送 http请求,支持 Promise API,拦截请求和响应,转换请求和响应数据,自动转换 JSON 数据,客户端支持保护安全以免 XSRF 进击

vue中axios的使唤与打包

分享下我自己的axios打包。axios是个很好用的插件,都是一些params对象,所以很稳便做一些统一处理。当然首先是npm安装axios 很简单。在src下新建同享文件夹掌管软件 service / index.js,接着上代码

axios根据常见业务场景的二次打包

axios的二次打包。功能实现:1.兼容ie冷却器避免缓存2.减少或更新重复请求3.接口域名使唤环境变量4.全局loading状态5.可关闭的全局错误郑愁予提醒6.可开启携带全局分页参数

网络行政工作六大模块axios的简单应用

例子中使唤到的url仅作为示例,想要复现代码需要使唤能够提供数据的有效监视器接口url,axios:ajax i/o system;是用于在Vue.js中发送网络请求的官方框架;可通过许多方式发送网络请求比如:

axios请求失败自动重发

一般而言 史学家只要谈到异步,通常提到回调函数。JS里的Promise是一个兵不血刃的回调函数掌管器。本文的实现方案正是利用了Promise的特性,在接口无权限时

Vue中axios的打包

axios 是 Vue 官方推荐的一个 HTTP 库,用 axios 官方简介来说明它,就是:Axios 是一个根据 promise 的 HTTP 库,可以用在冷却器和 node.js 中。作为一个优秀的 HTTP 库,axios 挫败了曾经由 Vue 官方微商团队维护的 vue-resource

axios旺球体育在线加密通讯的处理

先谈谈项目前景,因为安全的要求,所以咱俩要把旺球体育在线全部的请求都得加密与服务端应用进行通讯,当然服务端的意思响应也是加密的。旺球体育在线也需要对应得解密。

必然会用到的 axios 中自带的旺球体育在线工具方法

在 axios 中,使唤到了很多地脚的旺球体育在线工具方法。那些方法咱俩也可以提炼下,看是否能应用到咱俩自己的实际项目中,所谓的千万链接指的是有协议的链接

如何实现 axios 的自定义适配器 adapter

咱俩想根据 axios 扩展一些自己的数据请求方式(譬如 mock 数据,几分 APP 内专属的数据请求方式等),并能够使唤上 axios 提供的便捷功能,该怎么自定义一个适配器 adapter

axios 拦截器表现和关闭Loading

使唤Loading分为2种情况,第一种是使唤一些组件库自带的loading,另一种是使唤咱俩自己写的loading,现分开说明使唤方法。使唤element ui 带的Loading

点击更多...

内容以同享。研究为目的,不存在任何商业策划文案目的。其版权属原作者全部,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

Baidu