ES8 新特征之-JavaScript中文网-JavaScript教程资源分享门户

ES8（ECMAScript 2017）是 JavaScript 语言的最新版本，其中最受关注的新特征之一就是 async/await。async/await 使得异步代码看起来更像同步代码，提高了代码可读性和可维护性。在本文中，我们将深入了解 async/await，探讨其工作原理、使用方法以及实际应用。

什么是 async/await？

async/await 是以前的 Promise 的语法糖。Promise 是处理异步操作的一种方式，但它的语法往往较为繁琐，代码进一步嵌套。async/await 对 Promise 进行了封装，让代码更加简洁清晰。

async/await 中，async 用于定义一个异步函数，该函数返回一个 Promise 对象。await 用于暂停异步函数的执行，等待 Promise 对象的状态变为 resolved 或者 rejected，然后继续执行异步函数。

使用 async/await

首先，我们定义一个异步的 fetchData 函数，它会通过 fetch 方法获取数据：

// javascriptcn.com 代码示例
async function fetchData(url) {
  const response = await fetch(url);
  const data = await response.json();
  return data;
}

fetchData("https://jsonplaceholder.typicode.com/todos/1")
  .then(data => console.log(data))
  .catch(error => console.log(error));

在上面的代码中，我们定义了一个异步函数 fetchData，传入一个 URL，它会用 fetch 方法去获取数据，等待 Promise 对象的状态变为 resolved 后，再将 JSON 解析并返回数据。最后我们在主函数里使用 then、catch 捕获 Promise 对象。

async/await 和 Promise

async/await 和 Promise 是不同的概念，但是它们可以配合使用。我们可以将 async 函数返回一个 Promise 对象，并对该 Promise 对象进行 then 和 catch 操作来处理 Promise。

// javascriptcn.com 代码示例
function fetchData(url) {
  return new Promise(async (resolve, reject) => {
    try {
      const response = await fetch(url);
      const data = await response.json();
      resolve(data);
    } catch (error) {
      reject(error);
    }
  });
}

fetchData("https://jsonplaceholder.typicode.com/todos/1")
  .then(data => console.log(data))
  .catch(error => console.log(error));

上述代码中我们将 fetchData 包裹在了一个 Promise 对象里，它的返回值是一个 Promise。当 fetchData 调用了 resolve(data) 时，Promise 对象的状态就变成了 resolved，通过 then 可以访问到这个解析后的数据；当 fetchData 调用了 reject(error) 时，Promise 对象的状态就变成了 rejected，通过 catch 可以访问到这个错误。

async/await 在 Node.js 中的使用

async/await 广泛应用于 Node.js 中编写高效异步代码。如下面的代码例子：

// javascriptcn.com 代码示例
const fs = require('fs');

async function read_file(path) {
  let promise = new Promise((resolve, reject) => {
    fs.readFile(path, (err, data) => {
      if (err) {
        reject(err);
      } else {
        resolve(data);
      }
    });
  });

  let result = await promise;
  console.log(result.toString());
}

read_file('./file.txt');

console.log('After Async');

在上面 Node.js 的代码中我们定义了一个 read_file 函数，该函数使用 Node.js 内置的 fs 库中的 readFile 方法来读取文件。当文件读取完成后，解析结果并输出到控制台。最后，我们在主函数中调用 read_file，同时输出 AFTER Async，以便观察执行的顺序。

总结

async/await 是新一代 JavaScript 异步处理技术的一个体现，它让异步代码简洁易懂，使得代码更加可读性和可维护性。在学习和运用 async/await 时，需要注意理解其和 Promise 的关系，并熟练使用其对于异步操作的处理。

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