了解异步 JavaScript

photo from unsplash

介绍

我发现异步 JavaScript 是大多数初学者最容易混淆的概念之一。我也不容易掌握。虽然我看了很多教程，也阅读了很多关于它的内容，但我花了一段时间才最终理解这个概念。

因此，在本文中，我将尽可能以最好的方式解释异步 JavaScript，以使初学者更容易理解它。

JavaScript 是一种单线程编程语言，这意味着一次只能发生一件事。也就是说，JavaScript 引擎在单个线程中一次只能处理一条语句。

虽然单线程语言简化了代码编写，因为您不必担心并发问题，但这也意味着您无法在不阻塞主线程的情况下执行网络访问等长时间操作。

想象一下从 API 请求一些数据。根据情况，服务器可能需要一些时间来处理请求，同时阻塞主线程使网页无响应。

为了解决这个问题，使用异步 JavaScript（例如回调、promise 和 async/await），您可以在不阻塞主线程的情况下执行长网络请求。

所以事不宜迟，让我们开始吧:)

在深入了解异步 JavaScript 之前，让我们先看看同步。

什么是同步 JavaScript 以及它是如何工作的？

在同步操作中，任务一次执行一项，只有当一项完成时，才会解除阻塞。

代码是按顺序执行的，即一个接一个，每个都等待另一个完全执行，然后才能按顺序执行下一个。同步 JavaScript 从上到下执行代码。

让我们看看下面的例子，让我们更好地理解：

了解异步 JavaScript

下面是代码执行后的结果：

了解异步 JavaScript

从结果可以看出，JavaScript 引擎从第一行代码到第二行，依次执行代码。

这就是同步 JavaScript 的工作原理，它先执行第一行代码，在本例中是“Solomon”，然后再执行下一行代码或程序。

我相信在这个阶段你已经了解了同步 JavaScript 的工作原理，所以让我们深入了解这篇文章的主要原因，即异步 JavaScript。

现在我们已经对什么是同步 JavaScript 有了基本的了解，让我们简单地进入今天的主题。

什么是异步 JavaScript 以及异步 JavaScript 如何工作？

可以将异步 JavaScript 描述为与同步 JavaScript 完全相反。

在这里，逻辑或程序不是按顺序或以有序方式执行的，而是基于在那个时间点准备好执行的代码来执行的。

让我们看一下下面的示例，以帮助我们更好地理解这一点：

了解异步 JavaScript

与第一个示例不同，JavaScript 引擎不会按顺序执行代码。让我们看看下面的结果：

了解异步 JavaScript

正如您在上面的代码中看到的，我们有一个 setTimeout 函数来记录
你好，而第二个代码记录 Hello Samson，然后最后一个记录 Hello Again！在控制台上。

JavaScript 引擎通过了第一个函数，即 setTimeout 函数，但它无法执行它，这是因为它被设置为在 3 秒后执行，因此 JavaScript 引擎不会等待，而是立即移动到第二个代码并执行它，转到第三个代码，在 3 秒后执行 setTimeout 函数之前执行它。

这是异步 JavaScript 工作原理的典型示例，与必须有序执行每个代码的同步 JavaScript 不同。

让我们看看执行异步 JavaScript 的方式。

执行异步 JavaScript 的方法

有三种编写异步 JavaScript 代码的方法，即：

打回来
承诺
等待/异步

在这篇文章中，我只会写回调和承诺。

让我们从回调开始：

打回来

所以简单来说，回调是我们在另一个函数中调用的函数。它可能会或可能不会异步执行。通常回调在父函数完成其操作后运行。

“回调函数是作为参数传递给另一个函数的函数，然后在外部函数内部调用该函数以完成某种例程或动作。” MDN

让我们看一个下面的例子：

 // 执行  
 函数getData（数据，回调）{  
 设置超时（（）=> {  
 console.log("正在从数据库中读取...");  
 回调（{数据：数据}）；  
 }, 2000)  
 }  
  
 // 展示  
 获取数据（5，函数（数据）{  
 控制台.log（数据）；  
 });

在执行块上， 获取数据（） 是一个模拟从数据库获取数据的函数，第一个参数是数据，第二个参数是我们在取回数据时想要运行的回调。为了快速模拟，我们将使用超时功能，该功能将在一定时间后运行。在显示屏上， 打回来 是在数据之后执行的函数，即 ** 5** , 在这种情况下, 被获取并且在这种情况下已经过去了设置的时间。

这里回调是异步执行的。

承诺

承诺是回调的替代品。它基本上是一个接受回调并异步执行它的对象。 Promise 可以解决（成功）或拒绝（发生一些错误），待处理：仍在执行。

Promise 被认为比回调更容易使用和维护，主要是因为语法更简单。

 const promise = new Promise((resolve, reject) => {  
 // 这里执行异步操作 如果 （） {  
 //一切都很好  
 resolve("响应成功！");  
 }  
 别的 {  
 拒绝（新错误（“出了点问题”））；  
 }  
 }); promise.then((结果) => {  
 控制台.log（结果）； //“响应成功！”  
 }).catch((错误) => {  
 控制台日志（错误）； // “出问题了”  
 });

正如我们所见， 。然后（） 接受两个参数，一个代表成功，一个代表失败（或者用 promises 的说法实现和拒绝）。

这 。抓住（） 块帮助您处理 .then() 链中发生的任何错误。

此外，您可能会注意到 Promise 并没有删除回调的使用，但它使函数链接变得简单并简化了代码，使其更易于阅读。

结论

JavaScript 中的异步操作还有更多内容，我们只是触及了皮毛，但理解回调和承诺的概念是一种很好的做法，因为它将为处理异步操作奠定良好的基础，尤其是在发出 API 请求和事件处理时。

快乐编码！！！

资源

[

回调和承诺：基本介绍

理解回调和承诺的概念有时会让人感到困惑，尤其是当你几乎不……

theamateurpolymath.com

](https://theamateurpolymath.com/2020/05/19/callback-promises-a-basic-introduction/)

[