了解异步等待

在为Web编写代码时，最终您需要进行一些可能需要一些时间才能完成的过程。 JavaScript无法真正多任务，因此我们需要一种处理这些长期运行过程的方法。

异步/等待是处理此类基于时间的测序的一种方式。当您需要提出某种网络请求然后使用结果数据时，这尤其适合。让我们挖！

承诺？承诺。

异步/等待是一种承诺。 JavaScript中的承诺是可以具有多个状态的对象（类似于现实生活的对象☺️）。承诺这样做是因为有时我们要求的东西不立即可用，我们需要能够检测到它的状态。

考虑某人要求您保证为他们做些事情，例如帮助他们移动。他们询问的是最初的状态。但是，直到出现并帮助他们移动之前，您才履行对他们的诺言。如果您取消计划，则拒绝了承诺。

同样，在JavaScript中承诺的三个可能的状态是：

• 待处理：当您第一次致电时，尚不清楚它将返回什么。
• 实现：这意味着操作成功完成
• 拒绝：操作失败

这是这些州的承诺的一个例子：

这是满足的状态。我们存储一个名为GetometAcos的承诺，通过解决方案并拒绝参数。我们告诉我们的诺言已经解决，这使我们可以再安装两次。

 const getOmetAcos = new Promise（（（分辨，拒绝）=> {
  console.log（“初始状态：对不起，我可以吃一些炸玉米饼吗”）；

  解决（）;
}））
  。然后（（）=> {
    console.log（“订购一些炸玉米饼”）;
  }））
  。然后（（）=> {
    console.log（“这是您的炸玉米饼”）;
  }））
  .catch（err => {
    Console.Error（“不！没有炸玉米饼。”）;
  }）;

 >初始状态：对不起，我可以吃点炸玉米饼吗
>订购一些炸玉米饼
>这是你的炸玉米饼

如果我们选择被拒绝的状态，我们将执行相同的功能，但这次拒绝它。现在，将打印到控制台的是初始状态和捕获错误：

 const getOmetAcos = new Promise（（（分辨，拒绝）=> {
  console.log（“初始状态：对不起，我可以吃一些炸玉米饼吗”）；

  拒绝（）;
}））
  。然后（（）=> {
    console.log（“订购一些炸玉米饼”）;
  }））
  。然后（（）=> {
    console.log（“这是您的炸玉米饼”）;
  }））
  .catch（err => {
    Console.Error（“不！没有炸玉米饼。”）;
  }）;

 >初始状态：对不起，我可以吃点炸玉米饼吗
>不！没有炸玉米饼。

当我们选择待处理状态时，我们将简单地console.log我们存储的内容，getOmetAcos。这将打印出悬而未决的状态，因为那是我们记录下来的承诺所处于的状态！

 console.log（getometAcos）

 >初始状态：对不起，我可以有一些＆＃x1f32e;
> Promise {<perdend>}
>订购一些＆＃x1f32e; s
>这是您的＆＃x1f32e; s</perdend>

那呢？

但这是一开始让我感到困惑的部分。为了从承诺中获得价值，您必须使用.when（）或返回诺言解决方案的东西。如果您考虑一下，这是有道理的，因为您需要捕获最终将是什么（而不是最初），因为它最初将处于等待状态。这就是为什么当我们记录上面的承诺时，我们看到它会打印出诺言{}的原因。在执行中，这一点还没有解决。

在您刚刚看到的那些承诺之上，异步/等待的是句法糖。这是我如何使用它以及安排多次执行的一个小例子。

异步函数炸玉米饼（）{
  返回等待Promise.resolve（“然后我不时吃美味的炸玉米饼！”）
};

炸玉米饼（）。然后（console.log）

或更深入的例子：

 //这是我们要安排的功能。这是一个诺言。
const addOne =（x）=> {
  返回新的承诺（resolve => {
    settimeout（（）=> { 
      console.log（`我添加了一个！现在是$ {x 1}。）
      解决（）
    }，2000）;
  }））
}

//我们将立即记录第一个， 
//然后，Addone Promise将运行，需要2秒
//然后最终控制台。Log将开火
异步函数addAsync（）{
  console.log（'我有10'）
  等待addone（10）
  console.log（`现在我已经完成了！`）
}

addAsync（）

 >我有10个
>我添加了一个！现在是11。
>现在我完成了！ 

一件事（a）等待另一件事

异步/等待的一种常见用途是将其用于链多个异步调用。在这里，我们将获取一些JSON，我们将使用这些JSON进入下一个获取呼叫，以找出要从第二个API中获取哪种类型的东西。在我们的情况下，我们想访问一些编程笑话，但是我们首先需要从其他API中找出我们想要的类型的报价。

第一个JSON文件看起来像这样 - 我们希望报价类型是随机的：

 {
  “类型”：“随机”
}

考虑到我们刚刚得到的随机查询参数，第二个API将返回看起来像这样的东西：

 {
  “ _id”：“ 5A933F6F8E7B510004CBA4C2”，
  “ en”：“尽管如此，计算机是一个苛刻的任务主管。它的程序必须是正确的，我们希望说的是必须在每个细节上准确地说。
  “作者”：“ Alan Perlis”，
  “ ID”：“ 5A933F6F8E7B510004CBA4C2”
}

我们调用异步函数，然后让它等待去检索第一个.json文件，然后才能从API获取数据。一旦发生这种情况，我们就可以对该响应做一些事情，例如将其添加到我们的页面中。

异步函数getQuote（）{
  //从一个获取电话中获取报价的类型，其他所有内容都等待这一点
  令soiteTyPeresponse =等待提取（`https：//s3-us-west-2.amazonaws.com/s.cdpn.io/28963/quotes.json`）
  令qouteType =等待foiteTyPeresponse.json（）（）

    //使用我们从第二个通话中的第一个电话中获得的收到的东西，其他所有内容都等待了这一点
  令quoteresponse =等待提取（“ https://programming-quotes-api.herokuapp.com/quotes/” quoteType.type）
  令Quote =等待引用QUONSE.JSON（）

  //完成
  console.log（'DONE'）
}

我们甚至可以使用模板文字和箭头功能简化此内容：

异步函数getQuote（）{
  //从一个获取电话中获取报价的类型，其他所有内容都等待这一点
  令quoteType =等待提取（`quates.json`）。然后（res => res.json（））

    //使用我们从第二个通话中的第一个电话中获得的收到的东西，其他所有内容都等待了这一点
  让QUOTE =等待提取（`programming-quotes.com/$ {quoteType.type}`）。然后（res => res.json（））

  //完成
  console.log（'DONE'）
}

getQuote（）

这是对此过程的动画解释。

尝试，抓住，最后

最终，我们希望将错误状态添加到此过程中。我们有方便的尝试，捕捉，最后阻止。

尝试 {
  //我会尝试为您执行一些代码
}
捕获（错误）{
  //我将在此过程中处理任何错误
} 
最后 {
  //我会以任何方式开火
}

让我们重组上面的代码以使用此语法并捕获任何错误。

异步函数getQuote（）{
  尝试 {
    //从一个获取电话中获取报价的类型，其他所有内容都等待这一点
    令quoteType =等待提取（`quates.json`）。然后（res => res.json（））

      //使用我们从第二个通话中的第一个电话中获得的收到的东西，其他所有内容都等待了这一点
    让QUOTE =等待提取（`programming-quotes.com/$ {quoteType.type}`）。然后（res => res.json（））

    //完成
    console.log（'DONE'）
  }

  捕获（错误）{
    console.warn（`我们在这里有一个错误：$ {error}`）
  }
}

getQuote（）

我们最终没有在这里使用，因为我们并不总是需要它。这是一个块，无论成功还是失败，它将始终发射。考虑最终在尝试捕捉的任何重复事物时最终使用。我通常将其用于清理。我写了一篇文章，如果您想知道更多。

您最终可能需要更复杂的错误处理，例如一种取消异步函数的方法。不幸的是，没有办法在本地进行此操作，但是值得庆幸的是，凯尔·辛普森（Kyle Simpson）创建了一个名为CAF的库，可以提供帮助。

进一步阅读

异步/等待的解释是从回调开始的，然后承诺，然后使用这些解释来构架异步/等待。由于如今，异步/等待的人都得到了很好的支持，因此我们没有走所有这些步骤。它仍然是不错的背景，尤其是如果您需要维护较旧的代码库。这是我最喜欢的一些资源：

• 异步JavaScript：从回调到承诺，到异步/等待（Tyler McGinnis）
• 异步JavaScript与异步/等待（Marius Schulz）
• 掌握异步JavaScript（James K. Nelson）

以上是了解异步等待的详细内容。更多信息请关注PHP中文网其他相关文章！