1.06 TypeScript异步函数与async、await的使用

TypeScript 中异步函数和 async/await 的使用主要有以下几个要点:

1. 异步函数定义

使用 async 关键字定义异步函数:

async function fetchData(): Promise<Data> {
  // 异步操作
}

2. Await 的使用

在 async 函数内部使用 await 等待 Promise 解析:

async function fetchData(): Promise<Data> {
  const response = await fetch('https://api.example.com/data');
  return response.json();
}

3. 错误处理

使用 try/catch 处理异步操作中的错误:

async function fetchData() {
  try {
    const data = await someAsyncOperation();
    // 处理数据
  } catch (error) {
    console.error('An error occurred:', error);
  }
}

4. 返回类型

异步函数返回类型应为 Promise:

async function getData (): Promise<string> {
  Return "Hello World";
}

5. 并行操作

使用 Promise.All ()并行执行多个异步操作:

async function fetchMultipleData (): Promise<Data[]> {
  Const [data 1, data 2, data 3] = await Promise.All ([
    FetchData 1 (),
    FetchData 2 (),
    FetchData 3 ()
  ]);
  Return [data 1, data 2, data 3];
}

6. 类型推断

利用 TypeScript 的类型推断简化代码:

Async function fetchUser () {
  Const response = await fetch ('/api/user');
  Const user = await response.Json ();
  Return user; // TypeScript 会自动推断返回类型
}

7. 避免在循环中使用 await

// 不推荐
For (const item of items) {
  Await processItem (item);
}
 
// 推荐
Const promises = items.Map (item => processItem (item));
Await Promise.All (promises);

8. 使用 Awaited 类型

type ResponseType = Awaited<ReturnType<typeof fetchData>>;

使用异步函数和 async/await 可以让异步代码更易读、更易维护, 同时 TypeScript 的类型检查可以帮助捕获潜在的错误。记住要正确处理错误, 合理使用并行操作, 并注意异步函数的执行顺序。

Citations: [1] https://blog.logrocket.com/async-await-typescript/ [2] https://www.atatus.com/blog/introduction-to-async-await-in-typescript/ [3] https://www.geeksforgeeks.org/async-await-function-in-javascript/ [4] https://www.typescriptlang.org/play/javascript/modern-javascript/async-await.ts.html [5] https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function