在前端开发中，我们经常会遇到需要发送请求并等待响应的情况。但是，如果请求的响应时间过长或者网络出现问题，我们可能需要设置一个请求超时时间，以避免用户长时间等待或者页面卡死。这时，我们可以使用 Promise.race() 方法来实现请求超时。
Promise.race() 方法简介
Promise.race() 方法接收一个 Promise 数组作为参数，返回一个新的 Promise 对象。该 Promise 对象将会在参数中的 Promise 中有一个 Promise 状态发生改变时，立即以该 Promise 的状态为自身状态进行改变，并将该 Promise 的返回值作为自身的返回值。
Promise.race(iterable);
实现请求超时
我们可以使用 Promise.race() 方法来实现请求超时。具体实现方式如下：
// www.javascriptcn.com code example
function fetchWithTimeout(url, options, timeout = 5000) {
// 创建一个 Promise 对象
const promise = new Promise((resolve, reject) => {
// 发送请求
fetch(url, options)
.then(response => {
// 请求成功，返回响应结果
resolve(response);
})
.catch(error => {
// 请求失败，抛出错误信息
reject(error);
});
});
// 创建一个 Promise 对象，用于设置请求超时
const timeoutPromise = new Promise((resolve, reject) => {
setTimeout(() => {
reject(new Error(`Request timed out after ${timeout}ms`));
}, timeout);
});
// 使用 Promise.race() 方法将两个 Promise 对象进行比较
return Promise.race([promise, timeoutPromise]);
}在上面的代码中，我们定义了一个名为 fetchWithTimeout() 的函数，该函数接收三个参数：请求的 URL，请求的配置选项，以及请求的超时时间（默认为 5000ms）。该函数内部首先创建了一个 Promise 对象，并使用 fetch() 方法发送请求。如果请求成功，该 Promise 对象将返回响应结果；如果请求失败，该 Promise 对象将抛出错误信息。
同时，该函数还创建了一个用于设置请求超时的 Promise 对象 timeoutPromise。该 Promise 对象使用 setTimeout() 方法设置了一个定时器，当请求超时时，将抛出一个错误信息。
最后，我们使用 Promise.race() 方法将两个 Promise 对象进行比较。当其中一个 Promise 对象状态发生改变时，该方法将立即以该 Promise 的状态为自身状态进行改变，并将该 Promise 的返回值作为自身的返回值。
示例代码
下面是一个使用 fetchWithTimeout() 方法实现请求超时的示例代码：
fetchWithTimeout('https://api.example.com/data', { method: 'GET' }, 3000)
.then(response => {
console.log(response);
})
.catch(error => {
console.error(error);
});在上面的代码中，我们使用 fetchWithTimeout() 方法发送了一个 GET 请求，并设置了超时时间为 3000ms。如果请求在该时间内没有得到响应，该方法将抛出一个错误信息。
学习和指导意义
使用 Promise.race() 方法实现请求超时，可以避免用户长时间等待或者页面卡死的情况。同时，该方法也可以用于其他需要等待异步操作的场景中，比如等待多个接口返回数据并进行合并。
在学习 Promise.race() 方法的同时，我们还可以了解其他 Promise 相关的方法，比如 Promise.all() 和 Promise.reject() 等。这些方法可以帮助我们更好地处理异步操作，提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d40e66a941bf71347ae935