异步/等待JavaScript
#javascript #async #promises #await

读取代码库并看到异步/等待功能的异步可能看起来有些棘手。在本文中，您将看到它们如何工作，并注意到这是一种聪明，更轻松的方法，可以使用异步功能。

先决条件ð

  1. 对承诺的工作知识（如果您不记得，我会快速复习！）
  2. 尝试/捕获的工作知识
  3. 代码编辑器（我推荐Visual Studio Code）

让我们开始吧

首先，让我们分解 async 关键字

当您在函数之前看到异步关键字时，这意味着该功能将返回承诺。 （这是复习！！）简单地说明了一个对象，它包含最终完成或同步操作失败的结果。让我们看一下它，

async function brewCoffee() {

  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("coffee is done! enjoy :)"), 2000)
  });

  try {
    let coffee = await promise;
    console.log(coffee);
  } catch(error) {
    console.log('error', error);
  }
}

brewCoffee();

//output: coffee is done! enjoy :)

函数brewCoffee从承诺开始，该承诺将在2秒后解决。该承诺将被分配给将打印出来的变量coffee。如果承诺被拒绝，则错误将在捕获量中打印出来。

如何扮演角色？

await关键字将暂停该函数的执行，以便承诺可以解决。

他们俩如何一起工作

await关键字在async函数中声明。通常，您会在API呼叫中看到async/await。这将确保在调用其他代码行之前正确获取数据。例如，

async function fetchCappiccunoRecipe() {
  const response = await fetch('https://api.sampleapis.com/coffee/hot');
  const recipe = await response.json();
  return recipe; 
}

function makeCoffee(recipe) {
  console.log('The coffee was made with this ', recipe);
}

async function barista() {
  const recipe = await fetchCappiccunoRecipe();
  makeCoffee(recipe); 
}

barista();

当调用barista函数时，将获取配方，该配方将作为makeCoffee函数中的参数传递。

关键要点

async/await将使您的代码更易于使用，尤其是因为它使其更可读。这也是编写异步功能的一种更简洁的方式。或者，它可以像这样写 

function fetchCappiccunoRecipe() {
  return fetch('https://api.sampleapis.com/coffee/hot');
}

function makeCoffee(recipe) {
  console.log('The coffee was made with this ', recipe);
}

function barista() {
  fetchCappiccunoRecipe().then((response) => {
    response.json().then((recipe) => {
      makeCoffee(recipe); 
    });
  });
}

barista();

您可以看到还有更多嵌套和回调功能。总体而言，这是一种更令人困惑的经历。

下一步

您的代码库中可能有机会使用async/await进行重构功能。我推荐有关将承诺迁移到async/await函数的文章：如果您需要其他指导，https://afteracademy.com/blog/migrating-from-promise-chains-to-async-await/！感谢您的阅读和愉快的编码：）