如何使用 Promise.race 添加超时以获取调用

fetch API 对于发出网络请求非常方便，但它没有内置的超时功能。这意味着如果网络速度慢或服务器没有响应，您的应用程序可能会无限期挂起。

幸运的是，JavaScript 是一种多功能语言，以事件驱动编程为中心，提供了一组分组在 Promise 对象中的实用函数。使用 Promise.race 方法，我们可以为 fetch 调用创建超时机制。这样，即使网络情况未按计划进行，我们也可以保持应用程序的响应能力。

所以，我将引导您了解如何使用 Promise.race 实现此超时。我们将从一个简单的获取示例开始，然后通过添加超时来增强它。我还将分享一个处理 CSRF 令牌的真实场景，向您展示此方法如何在安全环境中工作。

假设我们有这个：

// Prepare fetch options
const options = {
    method: method,
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'X-CSRF-TOKEN': csrfToken
    },
    body: JSON.stringify({items})
};

// Make the fetch request
const response = await fetch(fetchUrl, options);

如果我们想添加超时机制来获取，我们可以创建一个带有触发拒绝的超时的 Promise。 Promise 使用 Promise.race 来运行多个 Promise，当一个 Promise 完成拒绝或解决时，停止其余所有操作。

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

// Make the fetch request
const response = await fetchWithTimeout(fetchUrl, options);

这是一个使用 CSRF 代币的真实示例

// Validate CSRF token
const csrfToken = document.querySelector('meta[name="csrf-token"]')?.content;
if (!csrfToken) {
    throw new Error('CSRF token not found in the document.');
}

// Prepare fetch options
const options = {
    method: method,
    headers: {
        'Content-Type': 'application/json',
        'Accept': 'application/json',
        'X-CSRF-TOKEN': csrfToken
    },
    body: JSON.stringify({items})
};

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

// Make the fetch request
const response = await fetchWithTimeout(fetchUrl, options);

以上是如何使用 Promise.race 添加超时以获取调用的详细内容。更多信息请关注PHP中文网其他相关文章！