正文

学会JS设置请求超时，避免无谓等待

/0 浏览量
0523

在JavaScript中，网络请求是构建现代Web应用的重要部分。然而，如果没有正确处理超时，网络请求可能会长时间挂起，导致用户体验下降。本文将介绍如何在JavaScript中设置请求超时，以确保你的应用能够更加健壮和响应迅速。

什么是请求超时？

请求超时是指在一段时间内，如果请求没有完成，那么浏览器或服务器会自动终止该请求。这个时间可以根据具体的需求进行设置。

使用XMLHttpRequest设置请求超时

XMLHttpRequest 是一种用于在浏览器与服务器之间交换数据的对象。以下是使用 XMLHttpRequest 设置请求超时的示例：

var xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);

// 设置请求超时时间（单位：毫秒）
xhr.timeout = 5000; // 5秒超时

xhr.onload = function() {
    if (xhr.status >= 200 && xhr.status < 300) {
        console.log('请求成功，响应数据：', xhr.responseText);
    } else {
        console.log('请求失败，状态码：', xhr.status);
    }
};

xhr.onerror = function() {
    console.log('请求出错');
};

xhr.ontimeout = function() {
    console.log('请求超时');
};

xhr.send();

在这个例子中，我们将超时时间设置为5000毫秒（5秒）。如果在这段时间内没有收到响应，ontimeout 事件将会被触发。

使用fetch API设置请求超时

fetch 是一个更现代、更简洁的替代方案，用于代替 XMLHttpRequest。以下是使用 fetch 设置请求超时的示例：

function fetchWithTimeout(resource, options) {
    const { timeout = 8000 } = options;
    const controller = new AbortController();
    const id = setTimeout(() => controller.abort(), timeout);

    const fetchPromise = fetch(resource, {
        ...options,
        signal: controller.signal
    }).then(response => {
        clearTimeout(id);
        return response;
    });

    return Promise.race([fetchPromise, controllerpromise]);
}

fetchWithTimeout('https://api.example.com/data', { timeout: 5000 })
    .then(response => {
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        return response.json();
    })
    .then(data => console.log(data))
    .catch(error => {
        if (error.name === 'AbortError') {
            console.error('Fetch aborted due to timeout');
        } else {
            console.error('Fetch error:', error);
        }
    });

在这个例子中，我们创建了一个名为 fetchWithTimeout 的函数，它接受一个资源和一个选项对象。我们使用 AbortController 来实现超时逻辑，并在超时后触发 AbortError。

总结

设置请求超时是确保网络请求不会无限期挂起的重要措施。通过使用 XMLHttpRequest 或 fetch API，你可以轻松地为你的JavaScript应用设置请求超时。这不仅能够提升用户体验，还能够使你的应用更加健壮。

-- 展开阅读全文 --