在前端开发中，Promise 是一种常用的异步编程解决方案。而在使用 Promise 进行异步操作时，经常需要用到 setTimeout 函数来模拟异步操作的耗时。然而，在使用 Promise 和 setTimeout 结合时，我们可能会遇到一些坑，这篇文章将介绍这些坑以及如何解决它们。
坑：setTimeout 函数返回的是一个定时器 ID，而不是 Promise 对象
在使用 Promise 和 setTimeout 结合时，我们可能会犯一个常见的错误：认为 setTimeout 函数会返回一个 Promise 对象。然而，实际上 setTimeout 函数返回的是一个定时器 ID，这个定时器 ID 可以用于取消定时器。
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('hello world');
}, 1000);
});
console.log(promise); // Promise {<pending>}上面的代码中，我们创建了一个 Promise 对象，并使用 setTimeout 函数模拟了一个异步操作。然而，我们会发现在控制台输出 promise 变量时，输出的是一个 pending 状态的 Promise 对象，而不是我们期望的字符串 'hello world'。
这是因为 setTimeout 函数返回的是一个定时器 ID，而不是 Promise 对象。因此，我们需要手动将 setTimeout 函数包装成一个 Promise 对象，以便于在 Promise 链中使用。
解决方案：手动包装 setTimeout 函数
为了将 setTimeout 函数包装成一个 Promise 对象，我们需要使用 Promise 构造函数，并在 setTimeout 函数中调用 resolve 函数。下面是一个示例代码：
-- -------------------- ---- -------
-------- ----------- -
------ --- ----------------- -- -
------------- -- -
----------
-- ------
---
-
------------------- -- -
------------------ --------
---上面的代码中，我们定义了一个 delay 函数，该函数接受一个时间参数，并返回一个 Promise 对象。在 delay 函数中，我们使用 Promise 构造函数包装了 setTimeout 函数，并在 setTimeout 函数中调用了 resolve 函数。
这样，我们就可以在 Promise 链中使用 delay 函数了：
delay(1000)
.then(() => {
console.log('hello world');
return delay(1000);
})
.then(() => {
console.log('hello world again');
});坑：使用 setTimeout 时，需要手动处理 Promise 的 reject
在使用 Promise 和 setTimeout 结合时，我们可能会遇到另一个坑：如果异步操作出现错误，我们需要手动调用 reject 函数，否则 Promise 链中后续的 then 方法会被跳过。
-- -------------------- ---- -------
----- ------- - --- ----------------- ------- -- -
------------- -- -
----- --- --------------
-- ------
---
-------
-------- -- -
------------------ --------
--
-------- -- -
------------------ ----- --------
--
-------------- -- -
---------------------
---上面的代码中，我们在 setTimeout 函数中抛出了一个错误，但是我们并没有手动调用 reject 函数。结果，控制台仅输出了一个错误信息，而没有输出 'hello world' 和 'hello world again'。
这是因为如果异步操作出现错误，Promise 链中后续的 then 方法会被跳过。因此，我们需要在 setTimeout 函数中手动调用 reject 函数。
解决方案：手动处理 Promise 的 reject
为了手动处理 Promise 的 reject，我们需要在 setTimeout 函数中使用 try-catch 语句捕获错误，并在 catch 块中调用 reject 函数。下面是一个示例代码：
-- -------------------- ---- -------
-------- ----------- -
------ --- ----------------- ------- -- -
------------- -- -
--- -
----- --- --------------
- ----- ------- -
--------------
-
-- ------
---
-
-----------
-------- -- -
------------------ --------
--
-------- -- -
------------------ ----- --------
--
-------------- -- -
---------------------
---上面的代码中，我们在 delay 函数中使用 try-catch 语句捕获错误，并在 catch 块中调用 reject 函数。
总结
在使用 Promise 和 setTimeout 结合时，我们需要注意两个坑点：
- setTimeout 函数返回的是一个定时器 ID，而不是 Promise 对象。因此，我们需要手动将 setTimeout 函数包装成一个 Promise 对象，以便于在 Promise 链中使用。
- 使用 setTimeout 时，需要手动处理 Promise 的 reject。如果异步操作出现错误，我们需要在 setTimeout 函数中手动调用 reject 函数，否则 Promise 链中后续的 then 方法会被跳过。
通过手动包装 setTimeout 函数和手动处理 Promise 的 reject，我们可以更好地使用 Promise 和 setTimeout 结合进行异步编程。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/660c6b23d10417a222ca87e8