js请求超时怎么解决方法

function makeRequest(url, timeout = 5000) {
    return new Promise((resolve, reject) => {
        const xhr = new XMLHttpRequest();
        xhr.open('GET', url, true);
        xhr.timeout = timeout; // 设置超时时间（毫秒）

        xhr.onload = function () {
            if (xhr.status >= 200 && xhr.status < 300) {
                resolve(xhr.response);
            } else {
                reject(new Error(xhr.statusText));
            }
        };

        xhr.onerror = function () {
            reject(new Error('Network Error'));
        };

        xhr.ontimeout = function () {
            reject(new Error('Request timed out'));
        };

        xhr.send();
    });
}

makeRequest('https://api.example.com/data')
    .then(response => console.log(response))
    .catch(error => console.error(error));

function fetchWithTimeout(url, options, timeout = 5000) {
    return Promise.race([
        fetch(url, options),
        new Promise((_, reject) =>
            setTimeout(() => reject(new Error('Request timed out')), timeout)
        )
    ]);
}

fetchWithTimeout('https://api.example.com/data', { method: 'GET' })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));

window.addEventListener('online', () => {
    console.log('Network connection restored');
    // 重新发起请求
});

window.addEventListener('offline', () => {
    console.log('Network connection lost');
});

function fetchWithRetry(url, options, retries = 3) {
    return fetch(url, options).catch(error => {
        if (retries > 0) {
            return fetchWithRetry(url, options, retries - 1);
        } else {
            throw error;
        }
    });
}

fetchWithRetry('https://api.example.com/data', { method: 'GET' })
    .then(response => response.json())
    .then(data => console.log(data))
    .catch(error => console.error(error));