JS中的await用法详解|极客笔记

JS中的await用法详解

在JavaScript中，我们经常会遇到需要等待某个异步操作完成后再继续执行下一步操作的情况。为了简化异步操作的处理，ES8(也就是ECMAScript 2017)中引入了async/await这一新的异步编程模式。await关键字用于等待一个Promise对象的结果，只能在async函数中使用。本文将详细介绍await的用法以及它的一些注意事项。

基本语法

await关键字放在一个Promise对象前面，表示等待这个Promise对象的状态变为resolved（已解决）后继续执行后面的代码。下面是一个简单的示例：

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  const result = await resolveAfter2Seconds();
  console.log(result);
  // 2秒后输出'resolved'
}

asyncCall();

在上面的示例中，resolveAfter2Seconds()方法返回一个Promise对象，模拟了一个2秒后才会返回结果的异步操作。在asyncCall()函数中，我们使用await关键字等待resolveAfter2Seconds()的结果，并在结果返回后打印出来。

错误处理

在使用await时，我们可以像同步代码一样使用try/catch语句来捕获Promise对象的异常。下面是一个简单的示例：

function rejectAfter2Seconds() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject(new Error('rejected'));
    }, 2000);
  });
}

async function asyncCall() {
  try {
    console.log('calling');
    await rejectAfter2Seconds();
  } catch(error) {
    console.error(error.message);
    // 2秒后输出'rejected'
  }
}

asyncCall();

在上面的示例中，rejectAfter2Seconds()方法返回一个Promise对象，2秒后会被rejected。在asyncCall()函数中，使用await等待rejectAfter2Seconds()的结果，并通过catch捕获了Promise对象的异常。

并行执行多个异步操作

有时候，我们需要并行执行多个异步操作，等待它们都完成后再继续执行下一步操作。使用Promise.all()结合await可以实现这个目的。下面是一个示例：

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved after 2 seconds');
    }, 2000);
  });
}

function resolveAfter3Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved after 3 seconds');
    }, 3000);
  });
}

async function asyncCall() {
  const promise1 = resolveAfter2Seconds();
  const promise2 = resolveAfter3Seconds();

  const results = await Promise.all([promise1, promise2]);

  results.forEach(result => {
    console.log(result);
  });
  // 3秒后输出'resolved after 2 seconds'
  // 3秒后输出'resolved after 3 seconds'
}

asyncCall();

在上面的示例中，我们定义了resolveAfter2Seconds()和resolveAfter3Seconds()两个返回Promise对象的方法。在asyncCall()函数中，我们并行执行这两个异步操作，并使用Promise.all()等待它们都完成。最终，我们可以通过results数组获取到每个异步操作的结果。

注意事项

await关键字只能在async函数中使用，如果在非async函数中使用会导致语法错误。
await只能等待Promise对象的结果，如果后面跟着一个普通值，它会立即执行并返回该值。
await关键字会让JavaScript线程等待Promise对象的状态变更，所以它会阻塞后续代码的执行。
await关键字会将Promise对象的resolved值作为返回值，如果Promise对象被rejected，await会抛出一个rejected的异常。
await关键字可以和try/catch结合使用来捕获异步操作的异常。