快捷導(dǎo)航

JavaScript接口防止重復(fù)請求的方法總結(jié)

更新時間：2024年12月25日 10:17:00 作者：我就不思

在前端開發(fā)中,防止重復(fù)請求是一個常見的問題,重復(fù)請求不僅會增加服務(wù)器的負載,還可能導(dǎo)致數(shù)據(jù)不一致等問題,本文為大家整理了一些常用的解決方法,需要的可以參考下

1、使用防抖（Debounce）或節(jié)流（Throttle）

防抖（Debounce）：在用戶停止觸發(fā)某個事件一定時間后執(zhí)行函數(shù)。例如，用戶頻繁點擊按鈕時，只有最后一次點擊會觸發(fā)請求。

function debounce(func, wait) {
    let timeout;
    return function() {
        const context = this;
        const args = arguments;
        clearTimeout(timeout);
        timeout = setTimeout(() => func.apply(context, args), wait);
    };
}

// 使用方法
const debouncedFetch = debounce((url) => fetch(url), 300);
debouncedFetch('https://api.example.com/data');

節(jié)流（Throttle）：規(guī)定在一個單位時間內(nèi)，只能觸發(fā)一次函數(shù)執(zhí)行。如果在同一個單位時間內(nèi)多次觸發(fā)函數(shù)，只有一次生效。

function throttle(func, limit) {
    let lastFunc;
    let lastRan;
    return function() {
        const context = this;
        const args = arguments;
        if (!lastRan) {
            func.apply(context, args);
            lastRan = Date.now();
        } else {
            clearTimeout(lastFunc);
            lastFunc = setTimeout(function() {
                if (Date.now() - lastRan >= limit) {
                    func.apply(context, args);
                    lastRan = Date.now();
                }
            }, limit - (Date.now() - lastRan));
        }
    };
}

???????// 使用方法
const throttledFetch = throttle((url) => fetch(url), 2000);
throttledFetch('https://api.example.com/data');

2、使用標志位（Flag）來防止重復(fù)請求

通過設(shè)置一個標志位，在請求進行中時阻止后續(xù)請求。

let isFetching = false;

function fetchData(url) {
    if (isFetching) return;
    isFetching = true;

???????    fetch(url)
        .then(response => response.json())
        .then(data => {
            // 處理返回的數(shù)據(jù)
        })
        .catch(error => {
            console.error('Error:', error);
        })
        .finally(() => {
            isFetching = false;
        });
}

3、使用 AbortController

AbortController 允許你在需要的時候中止請求。

const controller = new AbortController();
const signal = controller.signal;

function fetchData(url) {
    fetch(url, { signal })
        .then(response => response.json())
        .then(data => {
            // 處理返回的數(shù)據(jù)
        })
        .catch(error => {
            if (error.name === 'AbortError') {
                console.log('Fetch aborted');
            } else {
                console.error('Error:', error);
            }
        });
}

???????// 在需要中止請求的地方調(diào)用 controller.abort()
controller.abort();

4、使用第三方庫（如 Axios 和 Redux-Saga）

如果你在使用 Axios 或 Redux-Saga，可以利用這些庫提供的中間件功能來實現(xiàn)防止重復(fù)請求。

Axios Cancel Token

Axios 支持取消請求的功能，可以通過 CancelToken 實現(xiàn)。

const axios = require('axios');
const CancelToken = axios.CancelToken;
let cancel;

???????function fetchData(url) {
    if (cancel) {
        cancel('Operation canceled due to new request.');
    }
    cancel = null;
    const source = CancelToken.source();
    axios.get(url, { cancelToken: source.token })
        .then(response => {
            // 處理返回的數(shù)據(jù)
        })
        .catch(thrown => {
            if (axios.isCancel(thrown)) {
                console.log('Request canceled', thrown.message);
            } else {
                console.error('Error:', thrown);
            }
        });
}