亚洲乱码中文字幕综合,中国熟女仑乱hd,亚洲精品乱拍国产一区二区三区,一本大道卡一卡二卡三乱码全集资源,又粗又黄又硬又爽的免费视频

Vue中Axios中取消請(qǐng)求及阻止重復(fù)請(qǐng)求的方法

 更新時(shí)間:2022年02月15日 10:09:29   作者:FogDispersed  
為了防止用戶(hù)在網(wǎng)絡(luò)不好或者其他情況下短時(shí)間內(nèi)重復(fù)進(jìn)行接口請(qǐng)求,重復(fù)發(fā)送多次請(qǐng)求,本文主要介紹了Vue中Axios中取消請(qǐng)求及阻止重復(fù)請(qǐng)求的方法,感興趣的可以了解一下

阻止請(qǐng)求目的:

為了防止用戶(hù)在網(wǎng)絡(luò)不好或者其他情況下短時(shí)間內(nèi)重復(fù)進(jìn)行接口請(qǐng)求,從而導(dǎo)致前端向后端重復(fù)發(fā)送多次請(qǐng)求。

常見(jiàn)情況:

PC端:輸入框搜素,多次請(qǐng)求接口移動(dòng)端:移動(dòng)端很容易造成誤操作或多操作請(qǐng)求(移動(dòng)端沒(méi)有點(diǎn)擊延遲)
注意:有Loading遮罩時(shí)也有可能發(fā)生重復(fù)請(qǐng)求

新建 axios.js 文件

在這里插入圖片描述

import axios from "axios";
// import router from "../js/router";
// import {  Message } from "element-ui";
/**
 * @description 函數(shù)返回唯一的請(qǐng)求key **/
function getRequestKey(config) {
    let {
        method,
        url,
        params,
        data
    } = config;
    // axios中取消請(qǐng)求及阻止重復(fù)請(qǐng)求的方法
    // 參數(shù)相同時(shí)阻止重復(fù)請(qǐng)求:
    // return [method, url, JSON.stringify(params), JSON.stringify(data)].join("&");
    // 請(qǐng)求方法相同,參數(shù)不同時(shí)阻止重復(fù)請(qǐng)求
    return [method, url].join("&");
}

/**
 * @description 添加請(qǐng)求信息 **/
let pendingRequest = new Map();

function addPendingRequest(config) {
    // console.log(config.url)
    let requestKey = getRequestKey(config);
    config.cancelToken = config.cancelToken || new axios.CancelToken((cancel) => {
        if (!pendingRequest.has(requestKey)) {
            pendingRequest.set(requestKey, cancel);
        }
    });
}

/**
 * @description 取消重復(fù)請(qǐng)求 **/
function removePendingRequest(config) {
    let requestKey = getRequestKey(config);
    if (pendingRequest.has(requestKey)) {
        // 如果是重復(fù)的請(qǐng)求,則執(zhí)行對(duì)應(yīng)的cancel函數(shù)
        let cancel = pendingRequest.get(requestKey);
        cancel(requestKey);
        // 將前一次重復(fù)的請(qǐng)求移除
        pendingRequest.delete(requestKey);
    }
}

/**
 * @description 請(qǐng)求攔截器 **/
axios.interceptors.request.use(
    function (config) {
        // 檢查是否存在重復(fù)請(qǐng)求,若存在則取消已發(fā)的請(qǐng)求
        removePendingRequest(config);
        // 把當(dāng)前請(qǐng)求信息添加到pendingRequest對(duì)象中
        addPendingRequest(config);
        return config;
    },
    function (error) {
        return Promise.reject(error);
    }
);

/**
 * @description 響應(yīng)攔截器 **/
axios.interceptors.response.use(
    function (response) {
        // 對(duì)響應(yīng)數(shù)據(jù)做點(diǎn)什么
        removePendingRequest(response.config);
        // 該方法是項(xiàng)目中用到
        // if (response.data.message == "您沒(méi)有獲得授權(quán)") {
        //     Message({
        //         type: "warning",
        //         message: "您沒(méi)有獲得授權(quán),請(qǐng)重新登錄",
        //     });
        //     localStorage.removeItem('token');
        //     localStorage.removeItem('data');
        //     router.push({
        //         name: "login",
        //     });
        // }
        return response;
    },
    function (error) {
        // 從pendingRequest對(duì)象中移除請(qǐng)求
        removePendingRequest(error.config || {});
        if (axios.isCancel(error)) {
            console.log("被取消的重復(fù)請(qǐng)求:" + error.message);
        }
        return Promise.reject(error);
    }

);
export default axios

全局 main.js 引入

import Vue from "vue";
import axios from "./until/axios";
Vue.prototype.$axios = axios;

在這里插入圖片描述

在這里插入圖片描述

在這里插入圖片描述

 到此這篇關(guān)于Vue中Axios中取消請(qǐng)求及阻止重復(fù)請(qǐng)求的方法的文章就介紹到這了,更多相關(guān)Axios取消請(qǐng)求及阻止重復(fù)請(qǐng)求內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • 基于vue中的scoped坑點(diǎn)解說(shuō)

    基于vue中的scoped坑點(diǎn)解說(shuō)

    這篇文章主要介紹了基于vue中的scoped坑點(diǎn)解說(shuō),具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧
    2020-09-09
  • vue+element?ui表格添加多個(gè)搜索條件篩選功能(前端查詢(xún))

    vue+element?ui表格添加多個(gè)搜索條件篩選功能(前端查詢(xún))

    這篇文章主要給大家介紹了關(guān)于vue+element?ui表格添加多個(gè)搜索條件篩選功能的相關(guān)資料,最近在使用element-ui的表格組件時(shí),遇到了搜索框功能的實(shí)現(xiàn)問(wèn)題,需要的朋友可以參考下
    2023-08-08
  • vue3調(diào)度器scheduler功能和用法詳解

    vue3調(diào)度器scheduler功能和用法詳解

    調(diào)度器是vue3響應(yīng)式系統(tǒng)中一個(gè)非常重要的特性,可調(diào)度性指的是當(dāng)trigger 動(dòng)作觸發(fā)副作用函數(shù)重新執(zhí)行時(shí),有能力決定副作用函數(shù)執(zhí)行的時(shí)機(jī)、次數(shù)以及方式,本文通過(guò)代碼示例給大家介紹調(diào)度器是什么,有什么功能,怎么使用,感興趣的同學(xué)可以借鑒閱讀
    2023-06-06
  • vue3 provide與inject的使用小技巧分享

    vue3 provide與inject的使用小技巧分享

    這篇文章主要介紹了vue3 provide與inject的使用小技巧,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方,望不吝賜教
    2022-04-04
  • vue實(shí)現(xiàn)的下拉框功能示例

    vue實(shí)現(xiàn)的下拉框功能示例

    這篇文章主要介紹了vue實(shí)現(xiàn)的下拉框功能,涉及vue.js數(shù)據(jù)讀取、遍歷、事件響應(yīng)等相關(guān)操作技巧,需要的朋友可以參考下
    2019-01-01
  • Vue實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車(chē)頁(yè)面

    Vue實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車(chē)頁(yè)面

    這篇文章主要為大家詳細(xì)介紹了Vue實(shí)現(xiàn)簡(jiǎn)易購(gòu)物車(chē)頁(yè)面,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2020-12-12
  • Vue移動(dòng)端實(shí)現(xiàn)圖片上傳及超過(guò)1M壓縮上傳

    Vue移動(dòng)端實(shí)現(xiàn)圖片上傳及超過(guò)1M壓縮上傳

    這篇文章主要為大家詳細(xì)介紹了Vue移動(dòng)端實(shí)現(xiàn)圖片上傳及超過(guò)1M壓縮上傳,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下
    2019-12-12
  • 詳解vue中屬性執(zhí)行順序

    詳解vue中屬性執(zhí)行順序

    這篇文章主要介紹了vue中屬性執(zhí)行順序,選項(xiàng)的執(zhí)行順序是 props -> data -> computed -> watch -> created -> mounted -> methods,具體詳細(xì)內(nèi)容本文給大家講解的非常詳細(xì),需要的朋友可以參考下
    2023-09-09
  • vue+VeeValidate 校驗(yàn)范圍實(shí)例詳解(部分校驗(yàn),全部校驗(yàn))

    vue+VeeValidate 校驗(yàn)范圍實(shí)例詳解(部分校驗(yàn),全部校驗(yàn))

    validate()可以指定校驗(yàn)范圍內(nèi),或者是全局的 字段。而validateAll()只能校驗(yàn)全局。這篇文章主要介紹了vue+VeeValidate 校驗(yàn)范圍(部分校驗(yàn),全部校驗(yàn)) ,需要的朋友可以參考下
    2018-10-10
  • vuex 的簡(jiǎn)單使用

    vuex 的簡(jiǎn)單使用

    vuex是一個(gè)專(zhuān)門(mén)為vue.js設(shè)計(jì)的集中式狀態(tài)管理架構(gòu)。這篇文章主要介紹了vuex 的簡(jiǎn)單使用,需要的朋友可以參考下
    2018-03-03

最新評(píng)論