背景

前文介绍了promise，但是promise会一直链式调用，对于强迫症来说，是很不友好的，故继续介绍离不开promise的async语法糖；

简介

async和await是ES2017引入的新特性，用于简化异步操作的编写。async函数是一个返回Promise对象的异步函数，而await关键字用于等待Promise对象的状态改变。下面是对async和await的详细介绍，以及结合示例代码进行说明。

async函数

async函数是一个返回Promise对象的异步函数，它的定义方式是在函数前面加上async关键字。async函数内部可以使用await关键字等待Promise对象的状态改变，同时也可以使用try…catch语句处理异步操作中的错误。

下面是一个简单的例子，使用async函数来获取用户信息：

Copyasync function getUserInfo(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}
Copyasync function getUserInfo(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}
Copyasync function getUserInfo(userId) {
  try {
    const response = await fetch(`/api/users/${userId}`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
  }
}

在上面的例子中，getUserInfo函数用于获取指定用户的信息。它使用了async关键字来定义异步函数，内部使用了await关键字等待fetch函数返回的Promise对象的状态改变。如果fetch函数返回的Promise对象的状态变为fulfilled，getUserInfo函数会将返回的JSON数据解析为JavaScript对象并返回；如果fetch函数返回的Promise对象的状态变为rejected，getUserInfo函数会将错误信息输出到控制台。

await关键字

await关键字用于等待Promise对象的状态改变。当await关键字后面的Promise对象的状态变为fulfilled时，await关键字会返回Promise对象的返回值；当Promise对象的状态变为rejected时，await关键字会抛出错误。

下面是一个使用await关键字等待Promise对象状态改变的例子：

Copyasync function delay(time) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(time);
    }, time);
  });
}
async function logDelay(time) {
  const result = await delay(time);
  console.log(`delay ${result}ms`);
}
logDelay(1000);
logDelay(2000);
logDelay(3000);
Copyasync function delay(time) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(time);
    }, time);
  });
}

async function logDelay(time) {
  const result = await delay(time);
  console.log(`delay ${result}ms`);
}



logDelay(1000);
logDelay(2000);
logDelay(3000);
Copyasync function delay(time) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(time);
    }, time);
  });
}

async function logDelay(time) {
  const result = await delay(time);
  console.log(`delay ${result}ms`);
}



logDelay(1000);
logDelay(2000);
logDelay(3000);

在上面的例子中，delay函数用于延迟一定时间后返回一个Promise对象，logDelay函数使用await关键字等待delay函数返回的Promise对象的状态改变。当delay函数返回的Promise对象的状态变为fulfilled时，logDelay函数会输出延迟的时间。

async函数和await关键字的组合

async函数和await关键字的组合可以使异步操作的编写变得更加简单。使用async函数可以让异步操作的代码看起来更像同步代码，而使用await关键字可以让异步操作的结果更加直观。

下面是一个使用async函数和await关键字的例子，用于获取用户信息并显示在页面上：

Copyasync function displayUserInfo(userId) {
  try {
    const userInfo = await getUserInfo(userId);
    const { name, email } = userInfo;
    const nameEl = document.querySelector('#name');
    const emailEl = document.querySelector('#email');
    nameEl.textContent = name;
    emailEl.textContent = email;
  } catch (error) {
    console.error(error);
  }
}
displayUserInfo(1);
Copyasync function displayUserInfo(userId) {
  try {
    const userInfo = await getUserInfo(userId);
    const { name, email } = userInfo;
    const nameEl = document.querySelector('#name');
    const emailEl = document.querySelector('#email');
    nameEl.textContent = name;
    emailEl.textContent = email;
  } catch (error) {
    console.error(error);
  }
}



displayUserInfo(1);
Copyasync function displayUserInfo(userId) {
  try {
    const userInfo = await getUserInfo(userId);
    const { name, email } = userInfo;
    const nameEl = document.querySelector('#name');
    const emailEl = document.querySelector('#email');
    nameEl.textContent = name;
    emailEl.textContent = email;
  } catch (error) {
    console.error(error);
  }
}



displayUserInfo(1);

在上面的例子中，displayUserInfo函数使用了async函数和await关键字来获取用户信息，并将用户信息显示在页面上。如果获取用户信息的过程中发生错误，displayUserInfo函数会将错误信息输出到控制台。

总结

async函数和await关键字是ES2017引入的新特性，用于简化异步操作的编写。async函数是一个返回Promise对象的异步函数，它的定义方式是在函数前面加上async关键字。await关键字用于等待Promise对象的状态改变。async函数和await关键字的组合可以使异步操作的编写变得更加简单，让异步操作的代码看起来更像同步代码，同时也可以让异步操作的结果更加直观。