Articles
TypeScript简介
TypeScript中的Async/await

TypeScript中的Async/await

本文解释了TypeScript中的async/await。

YouTube Video

TypeScript中的Async/await

在TypeScript中，async是描述异步操作的关键字，其行为与JavaScript的async/await语法类似。async函数的设计使得处理返回Promise的函数更加直观。

async函数的基础

使用async关键字声明的函数始终返回一个Promise。以下是一个基础示例：。

1async function fetchData(): Promise<string> {
2    return "Data received";
3}
4
5fetchData().then((data) => console.log(data)); // "Data received"

在这个示例中，由于async函数总是返回一个Promise，返回的值会被自动用Promise.resolve解析。换句话说，"Data received"变成了一个Promise<string>，并被视为异步操作。

await关键字

await关键字只能在async函数内使用。这提供了暂停能力，可以在继续执行函数之前等待Promise的结果。

在以下示例中，使用fetch的异步处理是用async/await编写的。

 1async function getUserData() {
 2    try {
 3        const response = await fetch("https://codesparklab.com/json/example.json");
 4        const data = await response.json();
 5        console.log(data);
 6    } catch (error) {
 7        console.error("Error fetching user data:", error);
 8    }
 9}
10
11getUserData();

在这个示例中，await用于等待fetch函数返回的Promise完成，并将结果赋值给变量response。此外，还会使用await等待response.json()的结果。

使用async/await进行错误处理

异步处理过程中发生的错误可以用标准的try...catch语法捕获。如果await部分发生错误，该错误会在catch块中处理。

 1async function fetchDataWithErrorHandling() {
 2    try {
 3        const response = await fetch('https://invalid.codesparklab.com/');
 4        if (!response.ok) {
 5            throw new Error(`HTTP error! status: ${response.status}`);
 6        }
 7        const data = await response.json();
 8        console.log(data);
 9    } catch (error) {
10        console.error("Fetch error:", error);
11    }
12}
13
14fetchDataWithErrorHandling();

在上述示例中，使用await等待fetch函数的结果，如果发生错误，会通过try...catch进行处理。

async/await的优点

  1. 直观的异步处理：通过使用async/await，代码流程比使用Promise链（then或catch）更直观，可以像同步处理一样编写。

  2. 简单的错误处理：使用try...catch简化了异步操作中的错误处理。比使用Promise链可以编写更可读的代码。

async函数的返回值

async函数总是返回一个Promise。因此，即使没有显式返回Promise，也可以通过使用async关键字实现异步处理。

1async function example() {
2    return 42;
3}
4
5example().then((result) => console.log(result)); // 42

在上述代码中，返回了一个同步值42，但由于它在async函数中，因此会自动转换为Promise.resolve(42)。

异步函数的顺序执行

在连续执行多个异步函数时，可以使用await来控制它们的执行顺序。

 1async function fetchData(url: string): Promise<any> {
 2    try {
 3        const response = await fetch(url);
 4        return await response.json();
 5    } catch (error) {
 6        console.error("Error fetching user data:", error);
 7    }
 8}
 9
10async function fetchData1(): Promise<any> {
11    return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15    return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function processData() {
19    const data1 = await fetchData1();
20    console.log(data1);
21
22    const data2 = await fetchData2();
23    console.log(data2);
24}
25
26processData();

在此示例中，fetchData1完成后，才会执行fetchData2。与使用Promise链相比，这种方式更具可读性。

并行执行

如果需要并行执行异步操作，可以使用Promise.all同时处理多个Promise。

 1async function fetchData(url: string): Promise<any> {
 2    try {
 3        const response = await fetch(url);
 4        return await response.json();
 5    } catch (error) {
 6        console.error("Error fetching user data:", error);
 7    }
 8}
 9
10async function fetchData1(): Promise<any> {
11    return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15    return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function fetchMultipleData() {
19    const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
20    console.log(data1);
21    console.log(data2);
22}
23
24fetchMultipleData();

在这种情况下，fetchData1和fetchData2将同时执行，并在两者都完成后继续处理。这使得可以高效地处理多个异步操作。

总结

  • async函数返回一个Promise，通过使用await关键字，可以等待异步操作的结果。
  • 通过使用try...catch，异步操作中的错误处理变得更加简单。
  • 通过使用Promise.all，可以并行执行多个异步操作。

async/await被广泛用于TypeScript和JavaScript中，因为它可以更简单地描述异步操作。

您可以在我们的YouTube频道上使用Visual Studio Code跟随上述文章进行学习。 请也查看我们的YouTube频道。

YouTube Video

TypeScript 中的 Promise 类TypeScript 中的生成器函数