JavaScript 中的异步代码是如何工作的？

在本文中，我们将探讨异步代码在JavaScript中的实际工作方式，包括其初始化、执行和调用过程。但在继续之前，让我们先了解一下同步代码是什么，以及它与异步代码有何不同。

  • 同步代码 - 这意味着用户按顺序获取同步调用和访问的数据。用户调用方法后，方法才会执行并进行检查。

  • 在异步代码中，触发器由用户或系统触发。触发函数的人并不重要，一旦函数被触发，它就会给出响应，而无需完成执行。例如：从服务器下载文件。

  • 异步函数也有一个调用栈，它接收方法调用并记录它们。这将遵循LIFO结构，即后进先出，其中每个任务函数都通过移除堆栈顶部存在的任何内容来执行。

示例 1

在下面的示例中，我们创建了一个异步代码并检查其工作方式。

  • 异步数据的主要目的是为用户提供更快的访问速度，并在后台执行其操作。

  • 这种方法在使用使用资源或尝试从 API 本身收集响应的 API（应用程序编程接口）时非常有用。

  • 为了处理异步数据，我们在 JavaScript 中使用 Promise 或回调函数。这些 Promise 或回调函数可以轻松地从 API 获取响应或数据。

  • 它还使用调用栈来记录事件以及接下来要调用的函数。我们还有事件循环、Web API 和消息队列来促进异步编程。

  • 任何同步方法或 DOM 事件都使用 Web API 来调用函数。但在异步调用中，我们将消息发布到队列中，该队列将在后台自动执行。

  • 事件循环执行的任务基本上取决于堆栈是否为空。如果堆栈不为空，则该特定事件循环将数据从队列获取到调用堆栈以进行执行。

# index.html

Open Compiler
<!DOCTYPE html>
<html lang="en">
<head>
   <title>Asynchronous Code</title>
</head>
<body>
   <h1 style="color: green;">
      Welcome To Tutorials Point
   </h1>
   <script>
      console.log("Program Starts......");
      setTimeout(() => {
         console.log("setTimeout execution....");
      }, 0);
      new Promise((resolve, reject) => {
         resolve("Promise resolved.....");
      })
      .then((res) => console.log(res))
      .catch((error) => console.log(error));
      console.log("Program Ends.....");
   </script>
</body>
</html>

输出

更新于：2022年4月22日

271 次浏览

开启您的职业生涯

完成课程获得认证

开始学习
广告