概述
Promise 和 async/await 是 JavaScript 中处理异步编程的两种方式。它们可以帮助我们更方便地处理异步代码，避免回调地狱。在 TypeScript 中，我们也可以使用这两种方式。本文将介绍如何使用它们以及 TypeScript 中的注意事项。
Promise
简介
Promise 是一种对象，表示一个异步操作的最终完成或失败，并返回结果或错误。Promise 有三种状态：pending（进行中）、fulfilled（已完成）和 rejected（已拒绝）。一旦变为 fulfilled 或 rejected 状态，就不会再改变。
使用方法
在 TypeScript 中使用 Promise 需要注意类型声明。Promise 的泛型参数分别表示异步操作返回值的类型和异步操作可能出现的错误类型。例如：
function fetchUser(id: number): Promise<{ name: string }> {
return fetch(`/users/${id}`).then((res) => res.json());
}在上面的例子中，fetchUser 函数返回一个 Promise 对象，该对象的泛型参数表示异步操作返回的类型为 { name: string }，没有错误类型。
Promise 有两种写法。一种是使用 then 和 catch 方法来处理成功和失败的回调。例如：
fetchUser(1)
.then((user) => {
console.log(user.name);
})
.catch((err) => {
console.error(err);
});另一种是使用 async/await 语法糖。例如：
async function printUserName() {
try {
const user = await fetchUser(1);
console.log(user.name);
} catch (err) {
console.error(err);
}
}链式调用
Promise 可以进行链式调用，避免一层层嵌套回调函数。例如：
// javascriptcn.com 代码示例
fetchUser(1)
.then((user) => {
console.log(user.name);
return fetch(`/articles?author=${user.name}`);
})
.then((articles) => {
console.log(articles);
})
.catch((err) => {
console.error(err);
});在上面的例子中，第一个 then 方法返回的是另一个 Promise 对象，它可以继续进行后续操作。
Promise.all 和 Promise.race
Promise 还有两个很有用的方法：Promise.all 和 Promise.race。
Promise.all 接收一个 Promise 数组，返回一个新的 Promise 对象。只有当所有 Promise 对象都变为 fulfilled 状态时，新的 Promise 对象才会变为 fulfilled 状态，返回值是所有 Promise 对象返回值组成的数组。如果有一个 Promise 对象变为 rejected 状态，那么新的 Promise 对象就会变为 rejected 状态。
Promise.all([fetchUser(1), fetchUser(2)])
.then((users) => {
console.log(users[0].name, users[1].name);
})
.catch((err) => {
console.error(err);
});Promise.race 接收一个 Promise 数组，返回一个新的 Promise 对象。只要有任何一个 Promise 对象变为 fulfilled 或 rejected 状态，新的 Promise 对象就会变为相同的状态，并返回该 Promise 对象的返回值或错误。
Promise.race([fetchUser(1), new Promise(() => {})])
.then((user) => {
console.log(user.name);
})
.catch((err) => {
console.error(err);
});async/await
简介
async/await 是 ES2017 引入的语法糖，可以更方便地处理 Promise 对象。async 函数返回一个 Promise 对象，await 表示等待一个 Promise 对象执行完毕。如果 Promise 对象变为 rejected 状态，那么会抛出一个错误，可以在 try…catch 语句中处理。
使用方法
在 TypeScript 中使用 async/await 时，需要声明函数返回的值的类型和可能抛出的错误类型，以及 await 后面的 Promise 对象的类型。例如：
async function fetchAndPrint() {
try {
const user = await fetchUser(1);
console.log(user.name);
} catch (err) {
console.error(err);
}
}总结
Promise 和 async/await 都是 JavaScript 中处理异步编程的重要方式，在 TypeScript 中也可以使用。使用这两种方式可以避免回调地狱，并使代码更易于理解和维护。在使用时，需要注意类型声明和错误处理。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/652ac2567d4982a6ebcfde33