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

在本文中，我们将学习在 JavaScript 中工作的异步代码。让我们了解与同步 JavaScript 相关的基本细节。

同步 JavaScript：

• 同步 JavaScript 意味着用户拥有同步访问且按顺序可用的数据。
• 在这种情况下，用户尝试访问在代码的不同段（如不同的函数或方法）中可用的数据，这些数据相互关联或相互依赖。
• 调用堆栈的概念出现在图片中，这是一个遵循 LIFO（后进先出）结构的堆栈，其中任务的每个函数都是通过删除堆栈本身顶部的任何内容来执行的。

示例：借助以下代码，让我们了解同步 JavaScript 的概念。

JavaScript

    let secondFunction = () => {
        console.log("GeeksforGeeks....");
        console.log("Second Function execution is completed.....");
    }
 
    let firstFunction = () => {
        console.log("First function Execution Starts.....");
        secondFunction();
        console.log("First Function execution ends here.....");
    }
 
    firstFunction();

输出：

First function Execution Starts.....
GeeksforGeeks....
Second Function execution is completed.....
First Function execution ends here.....

借助以下调用堆栈的图形表示来解释上述同步代码的工作。

• 每个元素都从堆栈顶部删除，当它被删除时，它会打印在浏览器的控制台中。
• 每当调用不同的函数并执行各自的数据时，这就是同步代码的实际工作方式。

现在我们已经了解了与同步 JavaScript 相关的细节，现在让我们了解什么是异步 JavaScript 及其在执行时的工作原理。

异步 JavaScript：

• 异步 JavaScript 仅意味着用户将以更快的方式接收数据这一事实。
• 这通常发生在用户尝试从 API（应用程序编程接口）资源获取数据或尝试从 API 本身收集响应时。
• 为了处理异步数据，我们使用承诺或回调来帮助用户轻松地从 API 获取响应或数据。
• 在了解了 Call Stack 的基础知识之后，还有一些技术概念，例如 Event Loop、Web API 和 Message Queue。
• 所有这些都与 JavaScript 引擎无关，它们实际上与浏览器的 JavaScript 运行环境有关。
• 每当任何同步方法或 DOM 事件（如 setTimeout 或 Promise 或回调）出现时，它就会被执行到 Web API 中，并在其计时器完成后被推入消息队列，事件循环进一步将消息推入调用堆栈执行。
• Event Loop 执行的任务基本上是判断栈是否为空。如果它是空的，那么那个特定的事件循环从消息队列中获取数据到调用堆栈执行。

示例 1：以下是一些示例，我们将使用 Promise 或回调或 DOM 事件展示 JavaScript 代码的异步特性。

JavaScript

    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.....");

输出：

Program Starts......
Program Ends.....
Promise resolved.....
setTimeout execution....

示例 2：

JavaScript

    console.log("Program Starts......");
    setTimeout(() => {
        console.log("setTimeout 1 execution....");
    }, 0);
    setTimeout(() => {
        console.log("setTimeout 2 execution....");
    }, 0);
    new Promise((resolve, reject) => {
        resolve("Promise 1 resolved.....");
    }).then((res) => console.log(res))
      .catch((error) => console.log(error));
    new Promise((resolve, reject) => {
        resolve("Promise 2 resolved.....");
    }).then((res) => console.log(res))
      .catch((error) => console.log(error));
    console.log("Program Ends.....");

输出：

Program Starts......
Program Ends.....
Promise 1 resolved.....
Promise 2 resolved.....
setTimeout 1 execution....
setTimeout 2 execution....