js如何处理网络请求超时

在 javascript 中处理网络请求超时可以使用 xmlhttprequest 或 fetch api。1) 使用 xmlhttprequest 时，通过 settimeout 函数设置超时时间，并在超时时调用 xhr.abort() 取消请求。2) 使用 fetch api 时，结合 abortcontroller 来实现超时处理，通过 signal 选项取消请求。

在 JavaScript 中处理网络请求超时是一个常见且重要的主题，特别是在开发需要高响应性和用户体验的应用时。让我们深入探讨如何实现这一功能，并分享一些实用的经验。

处理网络请求超时意味着我们需要在一定时间内没有收到响应时，采取一些措施，比如取消请求、显示错误信息或者重试请求。JavaScript 提供了多种方法来实现这一功能，其中最常用的是使用 XMLHttpRequest 或 fetch API 结合 setTimeout 函数。

让我们从一个简单的 XMLHttpRequest 示例开始：

function makeRequest(url, timeout) {    const xhr = new XMLHttpRequest();    let timeoutId;    xhr.open('GET', url, true);    xhr.onload = function() {        if (xhr.status === 200) {            console.log('请求成功:', xhr.responseText);        } else {            console.log('请求失败:', xhr.statusText);        }        clearTimeout(timeoutId);    };    xhr.onerror = function() {        console.log('请求错误');        clearTimeout(timeoutId);    };    xhr.send();    timeoutId = setTimeout(function() {        xhr.abort();        console.log('请求超时');    }, timeout);}makeRequest('https://example.com', 5000);

登录后复制