ES8 中的 async/await 语法：从入门到放弃-JavaScript中文网-JavaScript教程资源分享门户

ES8 中的 async/await 语法：从入门到放弃

JavaScript 一直被称为一门异步式语言，它让各种异步操作变得更加容易，比如异步请求，定时器等等。ES6 的 promise 以及 Generator 规范已经很好地解决了异步问题，但是在实际的代码编写过程中，对于回调函数的嵌套还是十分的恼人，过于复杂的逻辑往往造成可读性差，难以维护。为此，ES8 引入了 async/await 语法，彻底解放了异步编程的束缚，让代码变得简单而优美。我们今天就来一起学习 ES8 中的 async/await 语法，实现从入门到放弃！

async/await 的基本使用方法

async/await 是一种用于异步编程的声明式解决方案。async 函数定义了一个异步函数，返回一个 promise 对象，可以使用 then() 方法进行链式调用。await 表达式是一种让 JavaScript 程序等待 promise 返回的特殊语法.

async 函数的语法如下：

async function functionName() {
  // 函数体
}

要使用 await，我们需要将其放置在一个 async 函数中。假设有一个 promise 对象需要等待返回，可以这样写：

async function asyncFunc() {
  let promise = new Promise((resolve, reject) => {
    setTimeout(() => resolve("done"), 1000)
  });

  let result = await promise;

  console.log(result); // "done"
}

上面代码中的 Promise 函数会在 1 秒后 resolve，然后 await 关键字将停止代码执行，直到 Promise 返回结果。在 Promise resolve 后，await 执行完成，并且 result 变量会被赋值。

需要注意的是，await 只能在 async 函数中使用，否则会抛出错误。且 await 关键字必须在 Promise 对象上使用，否则也会抛出错误。

async/await 的错误处理

async 函数可以使用 try/catch 语句来捕捉异常。在异步操作中，错误往往发生在 Promise 对象中，所以在 async 函数中捕捉错误时要将其包裹在 try 块中。

例如：

async function asyncFunc() {
  try {
    let promise = fetch("https://api.github.com/users/zhangsan");
    let result = await promise;
    console.log(result);
  } catch(error) {
    console.log(error);
  }
}

上述代码中的 fetch 语句是一个 Promise，如果 Promise 返回异常，则执行 catch 语句块。

使用 async/await 处理多个 Promise

使用 Promise.all() 和 async/await，可以轻松处理多个 Promise。

例如：

async function asyncFunc() {
  let promise1 = fetch("https://api.github.com/users/zhangsan");
  let promise2 = fetch("https://api.github.com/users/lisi");
  let promise3 = fetch("https://api.github.com/users/wangwu");

  let [result1, result2, result3] = await Promise.all([promise1, promise2, promise3]);

  console.log(result1, result2, result3);
}

在上面的代码中，使用 Promise.all() 等待所有 Promise 对象返回结果，然后使用解构赋值，用 result1、result2、result3 分别获取三个 Promise 对象返回的结果。

async/await 的指导意义

async/await 语法糖使用简单，可读性强，使异步编程变得更加容易。相比于 callback 和 promise，async/await 更好地表达了程序员的意图和需求，可以优化代码的结构设计和性能优化等方面。使用 async/await 还可以避免回调地狱和代码可读性差的问题，让代码的可维护性更高。

在实际的项目实践中，我们应该尽量采用 async/await 语法，以提高程序的可读性和可维护性。但是需要注意的是，async/await 并不是所有问题的最佳解决方案，在涉及大量的复杂逻辑和特定场景的情况下，需要根据具体情况进行权衡和选择。

示例代码

以下是一些使用 async/await 的示例代码：

// 异步请求示例

async function getData() {
  let response = await fetch('https://jsonplaceholder.typicode.com/posts');
  let data = await response.json();
  return data;
}

getData().then(data => console.log(data));

// promise 处理

function asyncTimeout() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve("asyncTimeout Done");
    }, 2000)
  });
}

async function asyncFunc() {
  console.log("Before await");
  await asyncTimeout();
  console.log("After await");
}

asyncFunc();

// 处理多个 promise

async function promiseWrapper() {
  let promise1 = fetch("https://api.github.com/users/zhangsan");
  let promise2 = fetch("https://api.github.com/users/lisi");
  let promise3 = fetch("https://api.github.com/users/wangwu");

  let [result1, result2, result3] = await Promise.all([promise1, promise2, promise3]);

  console.log(result1, result2, result3);
}

promiseWrapper();

通过上面的示例代码，可以更好地理解 async/await 的用法和效果。

总结

async/await 语法是异步编程的一种新解决方案，它使代码更简单易读、可维护性更强。我们从 async/await 的基本使用到错误处理、处理多个 Promise，详细地学习和掌握 async/await 的使用和指导意义。相信在实际的项目开发中，我们会发现 async/await 的出现会让异步编程变得更加简单便捷，使我们的代码更容易理解和维护，同时也提升了开发效率。

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