JavaScript接口防止重复请求的方法总结

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');

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');

let isFetching = false;

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

​​​​​​​    fetch(url)
        .then(response => response.json())
        .then(data => {
            // 处理返回的数据
        })
        .catch(error => {
            console.error('Error:', error);
        })
        .finally(() => {
            isFetching = false;
        });
}

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

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

​​​​​​​// 在需要中止请求的地方调用 controller.abort()
controller.abort();

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 => {
            // 处理返回的数据
        })
        .catch(thrown => {
            if (axios.isCancel(thrown)) {
                console.log('Request canceled', thrown.message);
            } else {
                console.error('Error:', thrown);
            }
        });
}