js async await|极客笔记

js async await

什么是js async/await

在JavaScript中，async/await是异步编程的一种解决方案。async和await关键字结合在一起，可以更简洁地处理异步代码。

async/await实际上是Promise的语法糖，能够以同步的方式书写异步代码。

js async

async关键字用来修饰一个函数，表示该函数是一个异步函数。异步函数会返回一个Promise对象。

下面是一个使用async关键字定义的异步函数的示例：

async function getData() {
  // 异步操作
  return 'data';  // 返回一个Promise对象
}

js await

await关键字只能用在异步函数里，用来等待一个Promise对象。当异步操作完成后，await会暂停当前函数的执行，等待Promise对象返回结果。

下面是一个使用await关键字的示例：

async function getData() {
  // 异步操作
  let result = await fetchData(); // 等待Promise对象返回结果
  console.log(result);
}

使用js async/await处理异步操作

下面通过几个实际的例子来演示如何使用async/await处理异步操作。

获取远程数据

假设我们有一个用于获取远程数据的函数fetchData()。我们可以使用async/await来处理这个异步操作：

async function getData() {
  try {
    let result = await fetchData();
    console.log(result);
  } catch (error) {
    console.log('获取数据失败：', error);
  }
}

js async await

多个异步操作的顺序执行

使用async/await可以非常方便地处理多个异步操作的顺序执行。

假设我们有三个异步操作fetchData1、fetchData2和fetchData3，我们要按顺序依次执行这三个操作。我们可以使用await来等待每个操作完成后再执行下一个操作：

async function getData() {
  try {
    let result1 = await fetchData1();
    console.log(result1);

    let result2 = await fetchData2();
    console.log(result2);

    let result3 = await fetchData3();
    console.log(result3);
  } catch (error) {
    console.log('获取数据失败：', error);
  }
}

多个异步操作并发执行

有些时候，我们需要同时执行多个异步操作，并等待它们全部完成。使用Promise的Promise.all()方法结合async/await可以轻松实现这一点。

async function getData() {
  try {
    let [result1, result2, result3] = await Promise.all([fetchData1(), fetchData2(), fetchData3()]);
    console.log(result1, result2, result3);
  } catch (error) {
    console.log('获取数据失败：', error);
  }
}

错误处理

在使用async/await时，我们可以使用try/catch语句来捕获可能出现的异常。

async function getData() {
  try {
    let result = await fetchData();
    console.log(result);
  } catch (error) {
    console.log('获取数据失败：', error);
  }
}

当我们在await表达式中使用的Promise对象发生了错误，会立即跳转到catch语句块，并且await后面的代码将不会执行。