如何在 TypeScript 中使用异步函数-JavaScript中文网-JavaScript教程资源分享门户

在前端开发中，异步编程已经成为了必备的技能之一。在 TypeScript 中使用异步函数则能够更加方便地管理异步操作，提升代码的可读性和可维护性。本文将介绍如何在 TypeScript 中使用异步函数，并提供示例代码供参考。

异步函数

异步函数是 ECMAScript 2017 中的新特性，通过 async 和 await 关键字实现。异步函数的作用是将异步代码包装成同步的形式，使得代码更加清晰易懂。异步函数的语法如下：

async function foo(): Promise<void> {
  // ...
}

其中，async 表示该函数是异步函数，Promise<void> 表示该函数返回的是一个 Promise 对象。异步函数中可以使用 await 关键字等待 Promise 对象的状态改变。

使用异步函数

在 TypeScript 中使用异步函数需要注意以下几点。

1. 函数声明

在声明异步函数时，需要指定异步函数返回的 Promise 对象类型。

async function foo(): Promise<void> {
  // ...
}

2. 非 Promise 容器

如果异步函数自身没有返回 Promise 对象，则 TypeScript 会默认将其包装在一个 Promise 容器中返回。

async function foo(): Promise<void> {
  return;
}

async function bar(): Promise<void> {
  await foo();
}

在这个例子中，foo 函数并没有返回 Promise 对象，但 TypeScript 会将其包装在一个 Promise 容器中返回。

3. Promise 容器中的参数类型

在 Promise 容器中，参数类型要和 Promise 对象的返回类型相符。

async function foo(): Promise<number> {
  return 1;
}

async function bar(): Promise<void> {
  const result: number = await foo();
}

4. 异步函数的错误处理

异步函数的错误需要通过 try-catch 语句进行处理。

// www.javascriptcn.com code example
async function foo(): Promise<void> {
  throw new Error('Something went wrong');
}

async function bar(): Promise<void> {
  try {
    await foo();
  } catch (err) {
    console.error(err);
  }
}

示例代码

使用异步函数处理异步操作

// www.javascriptcn.com code example
async function fetchData(): Promise<string> {
  const result = await fetch('https://example.com/data');
  const data = await result.text();
  return data;
}

async function main(): Promise<void> {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (err) {
    console.error(err);
  }
}

在上述示例代码中，fetchData 函数使用 fetch 方法获取数据，并将结果用 await 等待。main 函数则调用 fetchData 函数获取数据，并使用 try-catch 语句捕获错误。

使用异步函数与 Promise.all()

// www.javascriptcn.com code example
async function fetchData1(): Promise<string> {
  const result = await fetch('https://example.com/data1');
  const data = await result.text();
  return data;
}

async function fetchData2(): Promise<string> {
  const result = await fetch('https://example.com/data2');
  const data = await result.text();
  return data;
}

async function main(): Promise<void> {
  try {
    const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
    console.log(data1, data2);
  } catch (err) {
    console.error(err);
  }
}

在上述示例代码中，main 函数使用 Promise.all 方法并行地调用 fetchData1 和 fetchData2 函数，并将结果存储在数组中。同时，使用数组解构赋值将结果分别存储在 data1 和 data2 变量中。如果有任何一个函数发生错误，都会被 try-catch 语句捕获。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d67b79a941bf7134c41916

如何在 TypeScript 中使用异步函数