探索 JavaScript 中 async 和 wait 的威力

1. 什么是 async 和 await

在介绍 async 和 await 之前，我们需要先了解一下 Promise。Promise 是 JavaScript 提供的一种异步编程解决方案，它解决了回调地狱的问题，使得前端开发中的异步编程变得更加简单。

然而，过去的 Promise 使用起来还是略有些繁琐，需要调用 then 方法来获取异步操作的结果。这就出现了 async 和 await ，它们简化了 Promise 的使用，使得异步编程更加易读易写。

async 是一个关键字，用于表示函数是异步函数，返回一个 Promise 对象。例如：

async function getData() { 

  // 模拟异步请求
  const data = await fetch('https://jsonplaceholder.typicode.com/posts');
  console.log(data);
}

上述代码中，async 关键字表明 getData 函数是异步函数，返回一个 Promise 对象。在函数内部，使用 await 关键字等待异步请求返回结果，然后将结果赋值给变量 data。

await 关键字只能在异步函数内部使用，用于等待 Promise 对象的状态变为 resolved。

2. async 和 await 的优势

2.1 简化异步操作

使用 async 和 await 之后，我们不再需要使用 then 方法来获取异步操作的结果。例如：

// Promise 写法

function getData() {
  return fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => response.json())
    .then(json => console.log(json));
}
// async 和 await 写法
async function getData() {
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
  const json = await response.json();
  console.log(json);
}

可以看出，使用 async 和 await 的写法更加清晰简洁，更容易理解。

2.2 错误处理更加方便

使用 async 和 await ，我们可以使用 try...catch 语句来捕获异步操作中的错误。例如：

// Promise 写法

function getData() {
  return fetch('https://jsonplaceholder.typicode.com/posts')
    .then(response => {
      if (!response.ok) {
        throw new Error('Network response was not ok');
      }
      return response.json();
    })
    .catch(error => console.error('Error:', error));
}
// async 和 await 写法
async function getData() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const json = await response.json();
    console.log(json);
  } catch (error) {
    console.error('Error:', error);
  }
}

可以看出，使用 async 和 await 的写法更加易读易写，错误处理也更加方便。

3. async 和 await 的应用场景

3.1 异步操作的顺序执行

在一些异步操作需要按照顺序执行的情况下，使用 async 和 await 可以让代码清晰易读。例如，我们需要先请求用户信息，然后在请求完成后再请求订单信息：

async function getData() {

  try {
    const userResponse = await fetch('https://jsonplaceholder.typicode.com/users');
    const user = await userResponse.json();
    console.log(user);
    const orderResponse = await fetch('https://jsonplaceholder.typicode.com/posts');
    const order = await orderResponse.json();
    console.log(order);
  } catch (error) {
    console.error('Error:', error);
  }
}
getData();

上面的代码中，首先以异步方式获取用户信息，等待请求结果后再以异步方式获取订单信息。

3.2 异步操作的串行执行

在一些异步操作需要按照顺序依次执行的情况下，使用 async 和 await 可以让代码更加简洁。例如，我们需要循环请求多个接口：

async function getData(urls) {

  try {
    for (const url of urls) {
      const response = await fetch(url);
      const data = await response.json();
      console.log(data);
    }
  } catch (error) {
    console.error('Error:', error);
  }
}
getData(['https://jsonplaceholder.typicode.com/users', 'https://jsonplaceholder.typicode.com/posts']);

上面的代码中，循环请求多个接口，以异步方式处理每个接口的响应结果。

4. 总结

async 和 await 是 JavaScript 中的异步编程解决方案之一，它们可以简化 Promise 的使用，使得异步编程更加易读易写。使用 async 和 await 也可以更加方便地处理错误和控制异步操作的执行顺序。