typescript await|极客教程

typescript await

在 TypeScript 中，await 是一个用于异步操作的关键字。它通常与 async 关键字一起使用，用于在异步函数中等待一个 Promise 的解决。本文将详细介绍 await 的使用方式和相关注意事项。

1. 异步函数与 `async` 关键字

异步函数是使用 async 关键字定义的函数，它可以包含一个或多个 await 表达式，用于等待一个异步操作的完成。异步函数返回一个 Promise 对象，这个 Promise 对象会在异步操作完成后进行解决。下面是一个使用 async 关键字定义的简单异步函数的示例：

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

上述示例中，getData 是一个异步函数，它使用 await 等待一个异步操作 fetch('https://api.example.com/data') 的完成，并将返回的结果解析为 JSON 格式。在异步函数中，await 表达式右侧的表达式必须返回一个 Promise 对象或者是一个实现了 then 方法的对象。

2. `await` 关键字的使用方式

await 关键字用于等待一个 Promise 对象的解决，并返回解决后的结果。在使用 await 关键字时，必须将其放在一个异步函数中。

下面是一个简单的示例，演示了 await 关键字的使用方式：

function delay(ms: number) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function example() {
  console.log('Start');
  await delay(2000);
  console.log('End');
}

example();

上述示例中，delay 函数返回一个 Promise 对象，在指定的毫秒数后解决。example 是一个异步函数，其中使用了 await 关键字等待 delay 函数的解决。在 await 表达式后面的代码（console.log('End')）将在 delay 解决后才会执行。运行上述代码，结果将会是以下输出：

Start
（等待 2 秒）
End

3. `await` 关键字的运行机制

当使用 await 关键字等待一个 Promise 对象的解决时，异步函数会暂停执行，直到这个 Promise 对象解决为止。这意味着，在 await 表达式后面的代码将会被阻塞，直到 Promise 解决或拒绝。

下面是一个使用 await 关键字的示例，展示了它的运行机制：

function fetchData() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('Data fetched');
    }, 2000);
  });
}

async function example() {
  console.log('Start');
  const result = await fetchData();
  console.log(result);
  console.log('End');
}

example();

在上述示例中，fetchData 函数返回一个 Promise 对象，在2秒后解决。example 函数中使用了 await 关键字等待 fetchData 函数的解决，并将结果赋值给 result 变量。在 await 表达式后面，代码将被阻塞，直到 Promise 对象解决。运行上述代码，将会得到以下输出：

Start
（等待 2 秒）
Data fetched
End

4. 错误处理

在异步函数中使用 await 关键字时，可以使用 try/catch 语句对可能发生的错误进行捕获和处理。

下面是一个示例，演示了使用 try/catch 来处理 await 表达式中可能发生的错误：

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const random = Math.random();
      if (random < 0.5) {
        resolve('Data fetched');
      } else {
        reject(new Error('Data fetch failed'));
      }
    }, 2000);
  });
}

async function example() {
  console.log('Start');
  try {
    const result = await fetchData();
    console.log(result);
  } catch (error) {
    console.error(error.message);
  }
  console.log('End');
}

example();

在上述示例中，fetchData 函数返回一个在2秒后可能解决或拒绝的 Promise 对象，拒绝时会抛出一个错误。在 example 函数中使用 try/catch 语句对异步操作进行错误处理。如果 Promise 解决，则输出；如果 Promise 拒绝，则捕获错误并输出错误信息。运行上述代码，可能得到以下输出：

Start
（等待 2 秒）
Data fetched
End

或者可能得到以下输出：

Start
（等待 2 秒）
Data fetch failed
End

5. `await` 表达式后面的代码执行

在异步函数中，await 表达式后面的代码只有在等待的 Promise 解决后才会执行。这是因为 await 关键字会将异步函数的执行暂停，直到 Promise 解决。

下面是一个示例，展示了 await 表达式后面的代码执行时机：

function delay(ms: number) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function example() {
  console.log('Start');
  await delay(2000);
  console.log('Middle');
  await delay(2000);
  console.log('End');
}

example();

在上述示例中，example 函数中使用了两个 await 表达式。在第一个 await 表达式后面的代码将在2秒后执行，然后函数将再次暂停，直到第二个 await 表达式后面的代码执行。运行上述代码，将会得到以下输出：

Start
（等待 2 秒）
Middle
（等待 2 秒）
End

6. `await` 在循环中的使用

通常情况下，我们可以在循环中使用 await 关键字来等待每次循环中的异步操作完成。这在处理异步集合或需要按顺序处理的异步任务时非常有用。

下面是一个示例，展示了 await 在循环中的使用方式：

function delay(ms: number) {
  return new Promise(resolve => setTimeout(resolve, ms));
}

async function example() {
  for (let i = 0; i < 5; i++) {
    console.log(`Iteration ${i}`);
    await delay(1000);
  }
  console.log('End');
}

example();

在上述示例中，example 函数使用 for 循环来执行异步操作。循环中的每次迭代都会等待 delay 函数的解决，然后输出迭代的数字。运行上述代码，将会得到以下输出：

Iteration 0
（等待 1 秒）
Iteration 1
（等待 1 秒）
Iteration 2
（等待 1 秒）
Iteration 3
（等待 1 秒）
Iteration 4
（等待 1 秒）
End

7. `await` 关键字的限制

使用 await 关键字时需要注意以下限制：

await 关键字只能在异步函数内部使用。如果在非异步函数中使用 await，TypeScript 编译器会发出错误提示。
在同一个作用域中，不能使用多个 await 关键字同时等待不同的 Promise 对象解决。这是因为 await 关键字会阻塞函数的执行，所以在一个 await 后面的代码必须等待前一个 await 的结果。
await 只能用于等待 Promise 对象的解决，不能直接用于其他类型的对象。