ES7 中 async/await 等异步函数的使用详解

在前端开发中，异步函数是非常常见的，因为其可以帮助我们在页面加载过程中异步地请求数据，提高用户体验。在ES7中，JavaScript引入了 async/await等新的异步函数语法，使得我们更加方便地处理异步问题。

什么是 async/await

async/await是一种基于Promise的异步处理方式，它的主要目的是简化异步代码的书写和处理。在使用 async/await之前，我们需要了解Promise。

Promise

Promise 是 ES6 中新增的异步编程解决方案，其本质是将回调函数的嵌套改为链式调用，在代码结构层面上更加清晰明了。Promise 对象主要有三个状态：pending（进行中）、fulfilled（已成功）、rejected（已失败）。

Promise 对象的语法如下：

const promise = new Promise((resolve, reject) => {
  // 异步操作
  if (/* 异步操作成功 */) {
    resolve(result); // 进入 fulfilled 状态
  } else {
    reject(error); // 进入 rejected 状态
  }
});

promise.then(result => {
  // 处理成功的结果
}).catch(error => {
  // 处理失败的结果
});

async/await

async 函数定义异步函数，它会返回 Promise 对象。在函数中，我们可以使用 await 关键字等待 Promise 对象解决，并接收 Promise 对象的结果。当 Promise 对象处于 rejected 状态时，async 函数会通过 throw 语句抛出异常，因此我们可以使用 try...catch 语句捕获异常。

使用 async/await 的语法如下：

async function asyncFunction() {
  try {
    const result = await promise;
    // 处理异步操作成功的结果
  } catch (error) {
    // 处理异步操作失败的结果
  }
}

值得注意的是，async/await 的使用需要配合 try...catch 语句，以尽可能地保证代码的健壮性。

async/await 示例

假设我们需要向服务器请求数据，我们可以通过以下两种方式来实现：

Promise

function getData() {
  return new Promise((resolve, reject) => {
    axios
      .get('https://api.example.com/data')
      .then(response => {
        resolve(response.data);
      })
      .catch(error => {
        reject(error);
      });
  });
}

getData()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error(error);
  });

async/await

async function getData() {
  try {
    const response = await axios.get('https://api.example.com/data');
    console.log(response.data);
  } catch (error) {
    console.error(error);
  }
}

getData();

从代码量上来看，使用 async/await 可以使得代码更加简洁明了，并且避免了 Promise 的嵌套调用。

总结

async/await 的出现大大简化了 JavaScript 中异步代码的处理，使得代码看起来更简洁，易于维护，提高了代码的可读性。在使用 async/await 时，需要注意 try...catch 语句的作用，以便更好地保证代码的健壮性。

来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65b61b64add4f0e0ffecc596