亚洲中字慕日产2020,大陆极品少妇内射AAAAAA,无码av大香线蕉伊人久久,久久精品国产亚洲av麻豆网站

資訊專欄INFORMATION COLUMN

axios重復(fù)點(diǎn)擊取消上一次請(qǐng)求封裝

馬永翠 / 1971人閱讀

摘要：使用場(chǎng)景重復(fù)點(diǎn)擊或者多標(biāo)簽使用一個(gè)視圖等當(dāng)然也可以用加載中或者透明背景禁止請(qǐng)求中再次點(diǎn)擊封裝代碼來自于互聯(lián)網(wǎng)聲明一個(gè)數(shù)組用于存儲(chǔ)每個(gè)請(qǐng)求的取消函數(shù)和標(biāo)識(shí)當(dāng)當(dāng)前請(qǐng)求在數(shù)組中存在時(shí)執(zhí)行函數(shù)體執(zhí)行取消操作請(qǐng)求攔截器在一個(gè)發(fā)送前執(zhí)行一下取消操作這里

使用場(chǎng)景

重復(fù)點(diǎn)擊或者多tab標(biāo)簽使用一個(gè)視圖等（當(dāng)然也可以用加載中或者透明背景禁止請(qǐng)求中再次點(diǎn)擊）

封裝代碼

來自于互聯(lián)網(wǎng)

let pending = []; //聲明一個(gè)數(shù)組用于存儲(chǔ)每個(gè)請(qǐng)求的取消函數(shù)和axios標(biāo)識(shí)
let cancelToken = axios.CancelToken;
let removePending = (config) => {
    for(let p in pending){
        if(pending[p].u === config.url + "&" + config.method) { //當(dāng)當(dāng)前請(qǐng)求在數(shù)組中存在時(shí)執(zhí)行函數(shù)體
            pending[p].f(); //執(zhí)行取消操作
            pending.splice(p, 1); 
        }
    }
}



// http請(qǐng)求攔截器
axios.interceptors.request.use(config => {

    removePending(config); //在一個(gè)axios發(fā)送前執(zhí)行一下取消操作
    config.cancelToken = new cancelToken((c)=>{
        // 這里的axios標(biāo)識(shí)我是用請(qǐng)求地址&請(qǐng)求方式拼接的字符串，當(dāng)然你可以選擇其他的一些方式
        pending.push({ u: config.url + "&" + config.method, f: c });  
    });
    
    return Promise.resolve(config)
}, error => {
    return Promise.reject(error)
})

// http響應(yīng)攔截器
axios.interceptors.response.use(data => { 
    
    removePending(data.config);  //在一個(gè)axios響應(yīng)后再執(zhí)行一下取消操作，把已經(jīng)完成的請(qǐng)求從pending中移除
    
    return Promise.resolve(data)
    
}, error => {
    //加載失敗
    return {"data":{}}
    // return Promise.reject(error)
})

經(jīng)過多次測(cè)試發(fā)現(xiàn)不同請(qǐng)求也給我取消了，原因是沒有校驗(yàn)請(qǐng)求參數(shù)，也就是說get請(qǐng)求可以用，修改以下代碼

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

修改為：

pending.push({ u: config.url + JSON.stringify(config.data) +"&" + config.method, f: c });//config.data為請(qǐng)求參數(shù)

上面判斷也需要修改，這樣get請(qǐng)求和post都可以用了

解決分析

（個(gè)人理解）
官方提供了axios.CancelToken來取消上一次請(qǐng)求方法，因此只需要判斷上一次請(qǐng)求是否重復(fù)。聲明數(shù)組變量 pending用于存儲(chǔ)每個(gè)請(qǐng)求實(shí)例的axios標(biāo)識(shí)（請(qǐng)求方式，請(qǐng)求參數(shù)，請(qǐng)求url）和該實(shí)例的取消函數(shù)；在請(qǐng)求攔截器中創(chuàng)建取消函數(shù)實(shí)例，將請(qǐng)求的標(biāo)識(shí)（判斷重復(fù)標(biāo)識(shí)）及 該請(qǐng)求實(shí)例取消函數(shù) push到pending數(shù)組中，創(chuàng)建取消上一次請(qǐng)求方法 removePending，該方法主要判斷axios請(qǐng)求標(biāo)識(shí)是否重復(fù)，重復(fù)則執(zhí)行該實(shí)例的取消函數(shù)，并且從 pending中移除標(biāo)識(shí)及該實(shí)例取消函數(shù)。

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://www.ezyhdfw.cn/yun/104829.html

相關(guān)文章

  • axios基于常見業(yè)務(wù)場(chǎng)景的二次封裝(更新)

    摘要：時(shí)隔一年再次更新下根據(jù)項(xiàng)目下常見業(yè)務(wù)場(chǎng)景對(duì)的二次封裝功能實(shí)現(xiàn)兼容瀏覽器避免緩存減少或更新重復(fù)請(qǐng)求接口域名使用環(huán)境變量全局狀態(tài)可關(guān)閉的全局錯(cuò)誤提醒可開啟攜帶全局分頁(yè)參數(shù)攔截器請(qǐng)求攔截器請(qǐng)求開始請(qǐng)求出錯(cuò)響應(yīng)攔截器請(qǐng)求結(jié)束請(qǐng)求錯(cuò)誤處理網(wǎng)絡(luò)請(qǐng)求中， 時(shí)隔一年再次更新下根據(jù)vue項(xiàng)目下常見業(yè)務(wù)場(chǎng)景對(duì)axios的二次封裝 功能實(shí)現(xiàn)：1.兼容ie瀏覽器避免緩存2.減少或更新重復(fù)請(qǐng)求3.接口域名使用環(huán)...

    dailybird 評(píng)論0 收藏0

  • 二次封裝axios，根據(jù)參數(shù)來實(shí)現(xiàn)多個(gè)請(qǐng)求多次攔截

    摘要：新建文件，設(shè)置請(qǐng)求攔截和處理的邏輯取消請(qǐng)求設(shè)置默認(rèn)請(qǐng)求頭，如果不需要可以取消這一步請(qǐng)求超時(shí)的時(shí)間限制開始設(shè)置請(qǐng)求發(fā)起的攔截處理代表發(fā)起請(qǐng)求的參數(shù)的實(shí)體得到參數(shù)中的字段，用于決定下次發(fā)起請(qǐng)求，取消對(duì)應(yīng)的相同字段的請(qǐng)求如果沒有就默認(rèn)添加一個(gè) 1. 新建 axiosTool.js 文件，設(shè)置請(qǐng)求攔截和處理的邏輯 import Vue from vue import axios from ax...

    MoAir 評(píng)論0 收藏0

  • 二次封裝axios，根據(jù)參數(shù)來實(shí)現(xiàn)多個(gè)請(qǐng)求多次攔截

    摘要：新建文件，設(shè)置請(qǐng)求攔截和處理的邏輯取消請(qǐng)求設(shè)置默認(rèn)請(qǐng)求頭，如果不需要可以取消這一步請(qǐng)求超時(shí)的時(shí)間限制開始設(shè)置請(qǐng)求發(fā)起的攔截處理代表發(fā)起請(qǐng)求的參數(shù)的實(shí)體得到參數(shù)中的字段，用于決定下次發(fā)起請(qǐng)求，取消對(duì)應(yīng)的相同字段的請(qǐng)求如果沒有就默認(rèn)添加一個(gè) 1. 新建 axiosTool.js 文件，設(shè)置請(qǐng)求攔截和處理的邏輯 import Vue from vue import axios from ax...

    gclove 評(píng)論0 收藏0

  • axios基于常見業(yè)務(wù)場(chǎng)景的二次封裝

    摘要：是一個(gè)基于的庫(kù)，可以用在瀏覽器和中。我在最近的幾個(gè)項(xiàng)目中都有使用，并基于根據(jù)常見的業(yè)務(wù)場(chǎng)景封裝了一個(gè)通用的服務(wù)。業(yè)務(wù)場(chǎng)景全局請(qǐng)求配置。請(qǐng)求攜帶，權(quán)限錯(cuò)誤統(tǒng)一管理。 axios axios 是一個(gè)基于 promise 的 HTTP 庫(kù)，可以用在瀏覽器和 node.js 中。在前端框架中的應(yīng)用也是特別廣泛，不管是vue還是react，都有很多項(xiàng)目用axios作為網(wǎng)絡(luò)請(qǐng)求庫(kù)。我在最近的幾個(gè)項(xiàng)...

    JasinYip 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

閱讀需要支付1元查看
<