跳到主要内容

TypeScript async/await

介绍

在现代 JavaScript 和 TypeScript 中,异步编程是处理耗时操作(如网络请求、文件读写等)的核心方式。传统的回调函数和 Promise 虽然有效,但代码可读性和维护性较差。为了解决这些问题,ES2017 引入了 async/await 语法,它让异步代码看起来更像同步代码,极大地简化了异步编程。

在 TypeScript 中,async/await 是基于 Promise 的语法糖,允许你以更直观的方式编写异步代码。本文将带你从基础到实际应用,全面掌握 async/await

什么是 async/await?

async/await 是 JavaScript 和 TypeScript 中处理异步操作的一种语法。它由两个关键字组成:

  • async:用于声明一个异步函数。异步函数会自动返回一个 Promise 对象。
  • await:用于等待一个 Promise 完成,并返回其解析值。await 只能在 async 函数中使用。

基本语法

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

在上面的代码中,fetchData 是一个异步函数。await 关键字会暂停函数的执行,直到 fetchresponse.json() 的 Promise 完成。

提示

await 只能在 async 函数中使用。如果在普通函数中使用 await,TypeScript 会报错。

逐步讲解

1. 声明异步函数

使用 async 关键字声明一个异步函数:

typescript
async function myAsyncFunction() {
// 异步操作
}

2. 使用 await 等待 Promise

在异步函数中,可以使用 await 等待一个 Promise 完成:

typescript
async function fetchUser() {
const response = await fetch('https://api.example.com/user');
const user = await response.json();
return user;
}

3. 处理错误

使用 try/catch 捕获异步操作中的错误:

typescript
async function fetchUser() {
try {
const response = await fetch('https://api.example.com/user');
const user = await response.json();
return user;
} catch (error) {
console.error('Error fetching user:', error);
}
}
警告

如果不使用 try/catch,未捕获的 Promise 错误可能会导致程序崩溃。

4. 并行执行多个异步操作

如果需要并行执行多个异步操作,可以使用 Promise.all

typescript
async function fetchMultipleData() {
const [user, posts] = await Promise.all([
fetch('https://api.example.com/user').then(res => res.json()),
fetch('https://api.example.com/posts').then(res => res.json())
]);
return { user, posts };
}

实际案例

案例 1:获取天气数据

假设我们需要从一个天气 API 获取当前天气数据,并将其显示在页面上:

typescript
async function getWeather(city: string) {
try {
const response = await fetch(`https://api.weatherapi.com/v1/current.json?key=YOUR_API_KEY&q=${city}`);
const weatherData = await response.json();
console.log(`Current temperature in ${city}: ${weatherData.current.temp_c}°C`);
} catch (error) {
console.error('Error fetching weather data:', error);
}
}

getWeather('Beijing');

案例 2:批量处理文件

假设我们需要读取多个文件并处理它们的内容:

typescript
import fs from 'fs/promises';

async function processFiles(filePaths: string[]) {
try {
const fileContents = await Promise.all(filePaths.map(filePath => fs.readFile(filePath, 'utf-8')));
fileContents.forEach((content, index) => {
console.log(`File ${filePaths[index]} content:`, content);
});
} catch (error) {
console.error('Error processing files:', error);
}
}

processFiles(['file1.txt', 'file2.txt']);

总结

async/await 是 TypeScript 中处理异步操作的强大工具。它让异步代码更易读、更易维护,同时保留了 Promise 的强大功能。通过本文的学习,你应该已经掌握了 async/await 的基本用法,并能够在实际项目中应用它。

附加资源与练习

  • 练习 1:编写一个异步函数,从 GitHub API 获取用户的仓库列表,并打印每个仓库的名称。
  • 练习 2:修改上面的天气案例,使其能够处理多个城市的天气数据,并返回一个包含所有城市天气的对象。
备注

如果你想深入了解 async/await 和 Promise 的关系,可以阅读 MDN 文档