ECMAScript 2017 中引入 async/await 如何简化异步编程-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，异步编程是一个非常常见的问题。在 JavaScript 中，异步编程通常使用回调、Promise 或者 Generator 来实现。然而，这些方法都有一些缺点，比如回调地狱、Promise 的 then() 方法嵌套等等。为了解决这些问题，ECMAScript 2017 引入了 async/await。

async/await 的基本用法

async/await 是一种基于 Promise 的异步编程方式，可以让异步代码看起来像同步代码。async/await 的基本用法是在函数前面加上 async 关键字，然后在异步操作前面加上 await 关键字。例如：

async function getData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
}

在这个例子中，fetch() 方法返回一个 Promise 对象，我们使用 await 关键字等待 Promise 对象的结果。这样，我们就可以像同步代码一样使用返回值。

async/await 的优点

async/await 有以下优点：

1. 代码更易读

使用 async/await 可以让异步代码看起来像同步代码，这样代码更易读。例如，我们可以将 Promise 的 then() 方法嵌套改写成 async/await：

// www.javascriptcn.com code example
// Promise 的 then() 方法嵌套
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data));

// async/await
async function getData() {
  const response = await fetch('https://api.example.com/data');
  const data = await response.json();
  console.log(data);
}

2. 错误处理更方便

使用 async/await 可以更方便地处理错误。我们可以使用 try/catch 语句来捕获异步操作中的错误。例如：

// www.javascriptcn.com code example
async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

如果 Promise 对象发生错误，就会被 catch 语句捕获。

3. 可以在循环中使用

使用 async/await 可以方便地在循环中使用异步操作。例如：

async function getData() {
  const urls = ['https://api.example.com/data1', 'https://api.example.com/data2', 'https://api.example.com/data3'];
  for (const url of urls) {
    const response = await fetch(url);
    const data = await response.json();
    console.log(data);
  }
}

在这个例子中，我们使用 for...of 循环遍历 urls 数组，然后使用 await 关键字等待每个异步操作的结果。

async/await 的注意事项

使用 async/await 时需要注意以下事项：

1. async 函数返回的是 Promise 对象

async 函数返回的是 Promise 对象。如果函数返回的是一个值，async 会将其包装成一个 Promise 对象。例如：

async function getData() {
  return 'data';
}

getData().then(data => console.log(data)); // 输出 'data'

2. await 只能在 async 函数中使用

await 关键字只能在 async 函数中使用。如果在普通函数中使用，会抛出语法错误。例如：

function getData() {
  const response = await fetch('https://api.example.com/data'); // 抛出语法错误
  const data = await response.json();
  console.log(data);
}

3. await 只能等待 Promise 对象

await 关键字只能等待 Promise 对象。如果等待的不是 Promise 对象，会直接返回结果。例如：

async function getData() {
  const data = await 'data'; // 直接返回 'data'
  console.log(data);
}

示例代码

下面是一个完整的使用 async/await 的示例代码：

// www.javascriptcn.com code example
async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

getData();

在这个例子中，我们定义了一个 async 函数 getData()，然后在函数中使用了 try/catch 语句和 await 关键字来处理异步操作。最后，我们调用 getData() 函数来执行异步操作。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d2a139a941bf713450cd67

ECMAScript 2017 中引入 async/await 如何简化异步编程