TypeScript 等待异步方法执行完成|极客教程

TypeScript 等待异步方法执行完成

在日常开发中，我们经常会遇到需要等待异步方法执行完成后再进行下一步操作的情况。在 TypeScript 中，有几种常见的处理方式可以实现等待异步方法执行完成的效果。本文将详细介绍这几种方法，并给出相应的示例代码。

Promise

在 TypeScript 中，Promise 是一种用于处理异步操作的对象。通过 Promise，我们可以更方便地处理异步代码的执行顺序。

Promise 有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。我们可以通过 then 方法监听 Promise 的状态改变，并在异步操作完成后执行相应的回调函数。

下面是一个使用 Promise 实现等待异步方法执行完成的示例代码：

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

async function waitForAsyncMethod() {
  console.log("开始执行异步方法");
  await delay(2000);
  console.log("异步方法执行完成");
}

console.log("程序开始执行");
waitForAsyncMethod().then(() => {
  console.log("等待异步方法执行完成");
});
console.log("程序结束执行");

运行上述代码，我们可以得到以下输出：

程序开始执行
开始执行异步方法
程序结束执行
异步方法执行完成
等待异步方法执行完成

从输出可以看出，waitForAsyncMethod 函数开始执行后，在执行到 await delay(2000) 时会暂停执行，等待 delay 函数内的定时器到期。当定时器到期后，waitForAsyncMethod 函数才会继续执行下去。

在 waitForAsyncMethod 函数后面使用 then 方法监听该函数返回的 Promise 对象的状态改变。当异步方法执行完成后，then 方法中的回调函数会被调用，从而实现等待异步方法执行完成的效果。

回调函数

除了 Promise，我们也可以使用回调函数来等待异步方法的执行完成。回调函数是一种常见的处理异步代码的方式，在 JavaScript 和 TypeScript 中都得到了广泛应用。

下面是一个使用回调函数实现等待异步方法执行完成的示例代码：

function delay(milliseconds: number, callback: () => void) {
  setTimeout(callback, milliseconds);
}

function waitForAsyncMethod(callback: () => void) {
  console.log("开始执行异步方法");
  delay(2000, () => {
    console.log("异步方法执行完成");
    callback();
  });
}

console.log("程序开始执行");
waitForAsyncMethod(() => {
  console.log("等待异步方法执行完成");
});
console.log("程序结束执行");

运行上述代码，我们可以得到与使用 Promise 的示例代码相同的输出。

在上述代码中，我们定义了 delay 函数和 waitForAsyncMethod 函数。delay 函数用于模拟一个需要等待的异步操作，它接受一个时间参数和一个回调函数参数，并在指定时间后调用回调函数。waitForAsyncMethod 函数内部首先执行异步方法，然后在异步方法执行完成后调用传入的回调函数。

与 Promise 不同的是，使用回调函数实现的等待异步方法执行完成的代码需要手动确定异步方法执行完成后的下一步操作，并将该操作封装在回调函数中。这会导致代码的可读性降低，并且在出现多层回调的情况下会使代码难以维护。

因此，推荐在 TypeScript 中使用 Promise 来处理异步操作，以提高代码的可读性和维护性。

async/await

在 TypeScript 2.1 版本以及 ECMAScript 2017（ES8）规范中引入了 async/await 关键字，它们提供了一种更简洁的语法来处理异步操作。

async 关键字用于修饰一个函数，并表示该函数是一个异步函数。异步函数可以包含一个或多个 await 关键字，用于等待一个异步操作完成。

下面是一个使用 async/await 关键字实现等待异步方法执行完成的示例代码：

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

async function waitForAsyncMethod() {
  console.log("开始执行异步方法");
  await delay(2000);
  console.log("异步方法执行完成");
}

console.log("程序开始执行");
waitForAsyncMethod().then(() => {
  console.log("等待异步方法执行完成");
});
console.log("程序结束执行");

运行上述代码，我们可以得到与使用 Promise 的示例代码相同的输出。

通过使用 async/await 关键字，我们可以编写出更加清晰简洁的异步代码。await 关键字会等待 Promise 对象的状态改变，并返回 Promise 对象的结果。在使用 await 关键字的地方，我们可以像编写同步代码一样，按照自然的顺序编写异步操作。

需要注意的是，await 关键字只能在异步函数内部使用。如果尝试在非异步函数中使用 await 关键字，TypeScript 编译器会报错。

总结

本文详细介绍了使用 Promise、回调函数和 async/await 关键字实现等待异步方法执行完成的方法，并给出了相应的示例代码。在日常开发中，我们可以根据实际情况选择最合适的方式来处理异步操作。使用 Promise 和 async/await 关键字可以使代码更加直观、易读，并且易于维护。而使用回调函数则需要手动管理异步代码的执行顺序，可读性和维护性较差。