在 JavaScript 中，promise 是一种常见的实现异步操作的方式。promise 通过链式调用的方式，让异步操作更加可控和可读。但在某些情况下，我们需要限制异步操作的执行时间，以免阻塞程序运行或造成不必要的资源浪费。本文将介绍 JavaScript 中 promise 超时的最佳实践，并提供示例代码和指导意义。
1. 问题分析
在使用 promise 进行异步操作时，我们可以使用 setTimeout 或 setInterval 来模拟异步操作的执行时间。例如：
// www.javascriptcn.com code example
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
async function test() {
await delay(2000);
console.log('done');
}
test();上述代码执行后，会延迟 2 秒后输出 done。但如果异步操作的执行时间超过了预期，就会导致程序阻塞或出现错误。在这种情况下，我们希望能够限制异步操作的执行时间，以在时间到期后自动终止该操作。
2. 解决方案
在 JavaScript 中，我们可以利用 Promise.race() 方法将多个 promise 包装成一个新的 promise，并在其中添加一个计时器，实现超时终止异步操作的功能。例如：
// www.javascriptcn.com code example
function timeout(ms, promise) {
return new Promise((resolve, reject) => {
const timer = setTimeout(() => {
reject(new Error('timeout'));
}, ms);
promise.then((value) => {
clearTimeout(timer);
resolve(value);
}, (reason) => {
clearTimeout(timer);
reject(reason);
});
});
}
async function test() {
const promise = delay(2000);
try {
const result = await timeout(1000, promise);
console.log(result);
} catch (error) {
console.error(error);
}
}
test();上述代码中，我们定义了一个 timeout() 函数，该函数接受一个时间参数（ms）和一个 promise 参数，返回一个新的 promise。在该新 promise 中，我们利用 setTimeout() 方法创建一个计时器，如果执行时间超过了预期，则会抛出一个错误。如果异步操作在预期时间内完成，则清除计时器，并将执行结果返回。
在实际使用中，我们可以将 promise 作为参数传递给 timeout() 函数，从而实现异步操作的超时终止。如果超时时，可以选择抛出错误、返回默认值或进行其他操作，具体取决于业务需求。
3. 示例代码
以下示例代码演示了如何使用 Promise.race() 方法和 timeout() 函数实现 promise 超时的功能。
// www.javascriptcn.com code example
function delay(ms) {
return new Promise(resolve => setTimeout(resolve, ms));
}
function timeout(ms, promise) {
return new Promise((resolve, reject) => {
const timer = setTimeout(() => {
reject(new Error('timeout'));
}, ms);
promise.then((value) => {
clearTimeout(timer);
resolve(value);
}, (reason) => {
clearTimeout(timer);
reject(reason);
});
});
}
async function test1() {
const promise = delay(2000);
try {
const result = await timeout(1000, promise);
console.log(result);
} catch (error) {
console.error(error);
}
}
async function test2() {
const promise = delay(1000);
try {
const result = await timeout(2000, promise);
console.log(result);
} catch (error) {
console.error(error);
}
}
test1();
test2();在上述代码中，test1() 和 test2() 分别创建了一个指定时间的 promise，并调用 timeout() 函数限制异步操作的执行时间，以探究异步操作超时的情况。
4. 指导意义
在 JavaScript 中，promise 是实现异步操作的一种常见方式，但异步操作的执行时间不易控制，容易导致阻塞和错误。为了避免这种情况，我们可以使用 Promise.race() 方法和 timeout() 函数，限制异步操作的执行时间，并在超时时自动终止该操作。此外，在实际使用中，我们需要根据业务需求，选择超时后的处理方式，以保证程序正常运行。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d77a40a941bf7134d6765e