TypeScript 的异步编程介绍

在 TypeScript 中，异步编程通常用于处理需要较长时间才能完成的任务，比如网络请求、文件操作等。异步编程允许程序在等待某些操作完成时不会阻塞主线程，从而提高程序的性能和响应速度。

TypeScript 继承了 JavaScript 的异步编程机制，因此，它的异步编程主要依赖以下几种方式：

1. 回调函数 (Callbacks)

回调函数是异步编程的最基本形式。通常，某个异步操作完成后，会执行一个回调函数。回调函数通常作为参数传递给异步函数。

typescriptCopy Code

function fetchData(callback: (data: string) => void) {
  setTimeout(() => {
    callback("数据加载完成");
  }, 1000);
}

fetchData((data) => {
  console.log(data);
});

问题：

• 回调地狱（Callback Hell）：当多个异步操作嵌套时，代码变得难以维护和理解。

2. Promises (Promise 对象)

Promise 是一种更为优雅的处理异步操作的方式。它表示一个可能还未完成，但最终会完成并返回结果的操作。Promise 有三个状态：

• Pending（等待中）
• Fulfilled（已完成）
• Rejected（已拒绝）

通过 .then() 和 .catch() 方法可以处理成功和失败的结果。

typescriptCopy Code

function fetchData(): Promise<string> {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("数据加载完成");
    }, 1000);
  });
}

fetchData().then((data) => {
  console.log(data);
}).catch((error) => {
  console.error(error);
});

优点：

• 比回调函数更易于理解和维护，避免了回调地狱。

3. async/await

async/await 是基于 Promise 的语法糖，它使得异步代码更像同步代码，极大地提高了代码的可读性和可维护性。async 用于标记函数为异步函数，await 用于等待 Promise 对象的结果。

typescriptCopy Code

function fetchData(): Promise<string> {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("数据加载完成");
    }, 1000);
  });
}

async function getData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error(error);
  }
}

getData();

优点：

• 使异步代码看起来像同步代码，从而提高了可读性。
• 可以使用 try/catch 来处理错误，避免了 .then() 和 .catch() 的链式调用。

4. Promise.all

当需要并行执行多个异步任务时，可以使用 Promise.all，它会等待所有的 Promise 完成，然后返回一个数组，包含每个 Promise 的结果。如果其中一个 Promise 失败，Promise.all 会立即失败。

typescriptCopy Code

function fetchData1(): Promise<string> {
  return new Promise((resolve) => setTimeout(() => resolve("数据1"), 1000));
}

function fetchData2(): Promise<string> {
  return new Promise((resolve) => setTimeout(() => resolve("数据2"), 2000));
}

async function getAllData() {
  const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
  console.log(data1, data2);
}

getAllData();

优点：

• 可以并行执行多个异步操作，并且只会等待所有任务完成后才继续执行。

5. Promise.race

Promise.race 用于并行执行多个异步任务，它会返回最先完成的 Promise 的结果，不管是成功还是失败。

typescriptCopy Code

async function getFastestData() {
  const fastestData = await Promise.race([fetchData1(), fetchData2()]);
  console.log(fastestData);
}

getFastestData();

优点：

• 当多个异步操作有不同的响应时间时，Promise.race 适合于选择最先完成的任务。

总结

TypeScript 支持 JavaScript 的异步编程方式，常见的有回调函数、Promise、async/await 等。使用 async/await 是最现代和最简洁的方式，它使得异步代码更易于理解和维护。Promise.all 和 Promise.race 提供了并行执行多个异步操作的能力，适用于不同的场景。