JavaScript 中，异步编程是至关重要的，因为它可以避免阻塞主线程，保证应用的正常运行。在事件循环机制中，异步调用通过将任务添加到任务队列中来实现，在任务队列有可执行任务时，事件循环会调用相关的回调函数。而 Promise 这个新的 API，则提供了一种更简洁和优雅的处理异步操作的方式，下面我们将深入探讨 Promise 如何在 event loop 中正确地处理异步调用。
Promise 的基本使用
我们先来回顾一下 Promise 在基本使用上的常见形式：
const promise = new Promise((resolve, reject) => {
// 异步操作代码，比如发送 HTTP 请求、读取文件等
// 当操作完成时调用 resolve 或 reject
});Promise 接收一个回调函数作为参数，在回调函数内部处理异步操作，并在操作完成后通过 resolve 或者 reject 来返回操作的结果或者抛出错误。
下面是一个例子，我们通过 Promise 进行异步加载图片：
-- -------------------- ---- -------
----- --------- - --- -- --- ----------------- ------- -- -
----- --- - --- --------
---------- - ---------- -
------------- -- --------- -------
--
----------- - ---------- -
---------- ----------- ----- ------ ---- ---------- -- --------- ------
--
------- - ----
---
------------------------------------------
--------- -- -
------------------- ------- -----
--
------------ -- -
---------------------
---在这个例子中，我们通过 loadImage 函数返回一个 Promise，当图片加载成功时，Promise 调用 resolve，当图片加载失败时，Promise 调用 reject，我们可以通过 Promise 链式调用的方式来处理操作完成后的结果或者错误，代码更简洁，易于理解。
Promise 的实现方式
Promise 的实现方式并不是固定的，但是在各种实现方式中，都有一件事情是相同的，那就是 Promise 内部的任务都是异步的。
对于 Promise 中的任务，如果它是异步的，那么它会被加入到任务队列中，等待执行。当任务队列中的任务被触发时，浏览器将执行这些任务，并使用 Promise 的 then 和 catch 执行相应的回调。这些回调函数会在相应的任务完成时被执行，也可以根据需要添加更多的回调。
需要注意的是，Promise 内部的任务是由一个微任务队列和一个宏任务队列组成，宏任务队列中的任务优先于微任务队列中的任务被执行。
Promise 处理异步调用
我们已经了解了 Promise 的基本使用和实现方式，现在我们来探讨一下 Promise 如何处理任务队列中的异步调用。
我们知道，Promise 内部的任务都是异步的，而这些异步任务会被添加到任务队列中，等待执行。当任务队列中的任务被触发时，浏览器将执行这些任务，并使用 Promise 的 then 和 catch 执行相应的回调。这些回调函数会在相应的任务完成时被执行，也可以根据需要添加更多的回调。
下面是一个例子，我们通过 Promise 处理一个异步加载图片的任务队列：
-- -------------------- ---- -------
----- --------- - --- -- --- ----------------- ------- -- -
----- --- - --- --------
---------- - ---------- -
------------- -- --------- -------
--
----------- - ---------- -
---------- ----------- ----- ------ ---- ---------- -- --------- ------
--
------- - ----
---
----- --------- - -
---------------------------------
---------------------------------
---------------------------------
--
----- ------ - ---
--------------------- -- -
----------------------- -- -
-----------------
------------------- ------- -----
-------------- -- -
---------------------
---
---
------------------ ------- ------------
--------------------------- -- -
---------------- ------ --------- --------
-------------- -- -
---------------------
---在这个例子中，我们通过 Promise.all 来等待所有图片都加载完成后输出一个消息。当我们运行这段代码时，我们可以看到最后输出的内容如下：
-- -------------------- ---- ------- ----- ------- --------- ------ ----- ---- ------------------------------------ ------- ------ ----- ---- ------------------------------------ ------- ------ ----- ---- ------------------------------------ ------- --- ------ ------- - ---- ------------------------------------ -------- ---- ------------------------------------ -------- ---- ------------------------------------ ------- -
从输出结果中我们可以看到，我们的代码先输出了 “start loading images...”，然后是三张图片的加载结果，最后输出了 “all images loaded.” 和所有加载图片的结果。
这里的关键是，Promise 内部的任务是异步的，它不会阻塞主线程，而是会将任务添加到任务队列中并等待执行。当任务完成时，Promise 调用相应的回调函数（如 then 或 catch），触发其所在的任务并执行任务队列中的下一个任务。
总结
Promise 是一种更简洁和优雅的处理异步操作的方式，在 event loop 中，我们可以通过将异步任务添加到任务队列中来实现异步调用。当任务完成时，Promise 会调用相应的回调函数，并触发其所在的任务，执行任务队列中的下一个任务。
在使用 Promise 进行异步编程时，我们需要注意以下几点：
- Promise 内部的任务是异步的，并且任务会被添加到任务队列中，等待执行。
- Promise 回调函数会在相应的任务完成时被调用。
- 我们可以使用 Promise 的
then和catch方法来处理操作完成后的结果或者错误。 - 在 Promise 内部的任务中，如果它是异步的，那么它会被加入到任务队列中，等待执行，当任务队列中的任务被触发时，浏览器将执行这些任务，并使用 Promise 的
then和catch执行相应的回调函数。
希望本文的内容可以对理解 Promise 在 event loop 中的异步调用有所帮助，为前端开发的同学提供一些指导和借鉴。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64637db7968c7c53b0485d32