ES6 async 函数-ES6入门指南

当前位置:　首页>> 技术小册>> ES6入门指南

ES6中引入了async/await语法，使异步编程变得更加简单和可读性更高。本章节将介绍async/await的概念和用法，并结合代码示例详细讲解如何使用async/await来处理异步任务。

1、什么是async/await？

async/await是一种用于处理异步任务的语法，它实际上是基于Promise实现的一种语法糖。async关键字用于定义一个异步函数，它会自动将函数的返回值封装成一个Promise对象。而await关键字则用于等待一个Promise对象的结果，直到结果返回后才会继续执行后面的代码。

使用async/await可以将异步代码写成类似于同步代码的形式，大大提高了代码的可读性和可维护性。它可以有效地解决回调地狱的问题，并且在错误处理方面也更加方便。

2、async函数的用法

async函数是ES6中新增的一种函数类型，它的语法形式如下：

async function foo() {
  // 异步任务
  return result;
}

async函数定义时需要使用async关键字，函数内部可以包含任意数量的异步任务。async函数的返回值会自动封装成一个Promise对象，如果函数内部抛出异常，则Promise对象的状态会变成rejected。

下面是一个简单的示例，展示了如何定义和使用async函数：

async function getUser(id) {
  const response = await fetch(`/users/${id}`);
  const data = await response.json();
  return data;
}
getUser(123).then(user => {
  console.log(user);
}).catch(error => {
  console.error(error);
});

上面的代码中，getUser函数使用了async关键字来定义。它内部首先使用fetch函数获取用户数据，然后使用await关键字等待数据返回。最后，将获取到的数据封装成一个Promise对象并返回。在调用getUser函数时，可以使用then和catch方法来处理异步任务的结果和异常。

3、await的用法

await关键字用于等待一个Promise对象的结果，它只能在async函数内部使用。当await关键字后面的Promise对象处于pending状态时，async函数会暂停执行，直到Promise对象的状态变为resolved或rejected。

使用await关键字可以避免回调地狱的问题，因为它使得异步代码可以像同步代码一样线性地编写。下面是一个使用await关键字的示例：

async function getUsers(ids) {
  const promises = ids.map(id => fetch(`/users/${id}`));
  const responses = await Promise.all(promises);
  const data = await Promise.all(responses.map(response => response.json()));
  return data;
}
getUsers([123, 456, 789]).then(users => {
  console.log(users);
}).catch(error => {
  console.error(error);
});

上面的代码中，getUsers函数首先使用map方法将所有的用户ID映射成一个Promise对象数组。然后，使用Promise.all方法等待所有Promise对象都返回结果。最后，再使用Promise.all方法将所有的结果转换为JSON格式的数据。在调用getUsers函数时，可以使用then和catch方法来处理异步任务的结果和异常。

注意：使用await关键字会将异步任务的结果自动封装成一个Promise对象。如果await后面的表达式不是一个Promise对象，它会被自动转换为一个已经resolve的Promise对象。另外，使用await关键字时需要将其放置在async函数内部，否则会报错。

4、async/await的错误处理

与Promise一样，async/await也需要进行错误处理。当async函数内部抛出异常时，其返回的Promise对象会变成rejected状态。可以使用try/catch语句来捕获异常并进行处理。下面是一个使用try/catch语句处理异常的示例：

async function getUser(id) {
  try {
    const response = await fetch(`/users/${id}`);
    const data = await response.json();
    return data;
  } catch (error) {
    console.error(error);
    throw new Error('Failed to fetch user');
  }
}
getUser(123).then(user => {
  console.log(user);
}).catch(error => {
  console.error(error);
});

上面的代码中，getUser函数使用try/catch语句捕获异常。当fetch或者response.json方法抛出异常时，控制流会进入catch块内部。在catch块中，可以对异常进行处理并抛出一个新的异常。在调用getUser函数时，可以使用then和catch方法来处理异步任务的结果和异常。

小结
async/await语法是ES6中引入的一种用于处理异步任务的语法糖，它基于Promise实现，可以使异步代码更加简单和可读性更高。使用async/await可以避免回调地狱的问题，使得异步代码可以像同步代码一样线性地编写。需要注意的是，在使用async/await时需要进行错误处理，可以使用try/catch语句捕获异常并进行处理。

在实际开发中，async/await已经成为处理异步任务的主流方式。它的使用不仅可以提高代码的可读性和可维护性，还可以大大简化异步代码的编写过程。因此，熟练掌握async/await语法是每个JavaScript开发者都需要掌握的重要技能之一。