了解 ES7 中的 async/await

在 JavaScript 中，ES7 引入了 async/await 这一重要特性，它使得异步操作可以像同步操作一样易于编写和理解。

基本原理

首先让我们来看一下基本原理。async/await 是基于 Promise 的，它本质上是一个语法糖，让异步操作更加易读、简洁。一个被 async 修饰的函数会自动返回一个 Promise 对象，而 await 可以暂停异步代码的执行，并等待 Promise 对象的处理结果。这保证了异步代码以顺序的方式执行，并且避免了回调地狱的问题。下面是一个简单的使用示例：

async function getData() {
  const data = await loadData();
  console.log(data);
}

在上述代码中，loadData() 返回一个 Promise 对象，await 会暂停代码的执行直到该 Promise 对象产生结果。然后，data 将被分配为该结果，并通过 console.log 打印出来。

更高级的用法

除了基本语法之外，async/await 还支持更多的高级用法。

错误处理

当一个 Promise 对象被拒绝（rejected）时，JavaScript 引擎会抛出一个异常。但是，在 async/await 语法中，你可以使用 try-catch 语句来捕获异常：

async function getData() {
  try {
    const data = await loadData();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

如果 Promise 对象被拒绝，则在 catch 子句中的代码将会被执行，同时也可以处理和报告错误。

并发执行

Promise 具有天然的并发特性，并能够精确地控制异步操作的执行顺序。因此，在需要同时处理多个异步操作的情况下，我们可以使用以下方法：

async function getAllData() {
  const [data1, data2, data3] = await Promise.all([loadData1(), loadData2(), loadData3()]);
  console.log(data1, data2, data3);
}

通过构造一个 Promise 数组，可以并行获取多个数据源，并等待它们全部完成。一旦所有的 Promise 都已经解决，就可以继续进行流程。

进度指示器

在长时间运行的异步操作中，进度指示器通常是非常有用的。我们可以通过封装 Promise 对象来实现这个功能：

function loadWithProgress(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onprogress = event => {
      if (event.lengthComputable) {
        const percentComplete = event.loaded / event.total * 100;
        console.log(percentComplete.toFixed(2) + '%');
      }
    };
    xhr.onload = () => {
      resolve(xhr.responseText);
    };
    xhr.onerror = () => {
      reject(xhr.statusText);
    };
    xhr.send();
  });
}

async function getDataWithProgress(url) {
  const data = await loadWithProgress(url);
  console.log(data);
}

在上面的示例中，我们重新实现了 loadData() 方法并添加了进度监测。这个新方法返回一个 Promise 对象，并可以在异步调用时使用。

总结与建议

通过学习本文，相信您对于 ES7 中的 async/await 有了更深入的认识和理解。这一特性是 JavaScript 异步编程的一个重要里程碑，它大大简化了代码的编写和阅读。

在实际开发中，建议您合理使用 async/await，遵循最佳实践和风格指南，并确保能够

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