前言
TypeScript 是一种静态类型的编程语言，它是 JavaScript 的超集，为开发者提供了更强大、更安全、更可维护的编码方式。在 TypeScript 中，异步编程是一个非常重要的主题，因为 JavaScript 是单线程的，异步编程是解决 JavaScript 中长时间运行任务的最佳方式。在本篇文章中，我们将深入探讨 TypeScript 中的异步编程技巧与应用。
Promise
Promise 是 JavaScript 中的异步编程解决方案之一，它基于回调函数，但是比回调函数更加灵活和可读性更高。在 TypeScript 中，Promise 的类型定义如下：
interface Promise<T> {
then<TResult1 = T, TResult2 = never>(onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null | undefined): Promise<TResult1 | TResult2>;
catch<TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null | undefined): Promise<T | TResult>;
}接下来，我们将介绍 Promise 的使用方法。
Promise 基础
在 TypeScript 中，我们可以使用 Promise 来处理异步操作，例如：
// www.javascriptcn.com code example
function fetchData(): Promise<string> {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, TypeScript!');
}, 1000);
});
}
fetchData().then(data => {
console.log(data);
});在上面的示例中，我们定义了一个名为 fetchData 的函数，该函数返回一个 Promise 对象。在 Promise 的构造函数中，我们传入了一个函数，该函数接收两个参数：resolve 和 reject。resolve 函数用于将 Promise 的状态从 pending 变为 resolved，并返回一个结果；reject 函数用于将 Promise 的状态从 pending 变为 rejected，并返回一个错误信息。在 fetchData 函数中，我们使用 setTimeout 模拟了一个异步操作，并在 1 秒后调用了 resolve 函数，将 Promise 的状态从 pending 变为 resolved，并返回了一个字符串。
接下来，我们通过 fetchData 函数返回的 Promise 对象调用了 then 方法，该方法接收一个函数作为参数，该函数将在 Promise 的状态变为 resolved 后被调用，并传入 Promise 的结果作为参数。在这个例子中，当 fetchData 函数返回的 Promise 对象状态变为 resolved 后，我们将会在控制台输出字符串 'Hello, TypeScript!'。
Promise 链式调用
在 TypeScript 中，我们可以通过 Promise 的链式调用来处理多个异步操作，例如：
// www.javascriptcn.com code example
function fetchData(): Promise<string> {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, TypeScript!');
}, 1000);
});
}
function processData(data: string): Promise<string> {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`${data} It's nice to meet you!`);
}, 1000);
});
}
fetchData()
.then(data => processData(data))
.then(data => console.log(data));在上面的示例中，我们定义了一个名为 processData 的函数，该函数接收一个字符串作为参数，并返回一个 Promise 对象。在 processData 函数中，我们使用 setTimeout 模拟了一个异步操作，并在 1 秒后调用了 resolve 函数，将 Promise 的状态从 pending 变为 resolved，并返回一个字符串。
在主函数中，我们通过 fetchData 函数返回的 Promise 对象调用了 then 方法，该方法接收一个函数作为参数，该函数将在 Promise 的状态变为 resolved 后被调用，并传入 Promise 的结果作为参数。在这个例子中，当 fetchData 函数返回的 Promise 对象状态变为 resolved 后，我们将会调用 processData 函数，并将 Promise 的结果传入该函数。processData 函数返回的 Promise 对象将会被传入下一个 then 方法，并继续处理。
Promise 错误处理
在 TypeScript 中，我们可以使用 Promise 的 catch 方法来处理 Promise 的错误，例如：
// www.javascriptcn.com code example
function fetchData(): Promise<string> {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('Error: Failed to fetch data!');
}, 1000);
});
}
fetchData()
.then(data => console.log(data))
.catch(error => console.error(error));在上面的示例中，我们定义了一个名为 fetchData 的函数，该函数返回一个 Promise 对象。在 Promise 的构造函数中，我们传入了一个函数，该函数接收两个参数：resolve 和 reject。在 fetchData 函数中，我们使用 setTimeout 模拟了一个异步操作，并在 1 秒后调用了 reject 函数，将 Promise 的状态从 pending 变为 rejected，并返回一个错误信息。
在主函数中，我们通过 fetchData 函数返回的 Promise 对象调用了 then 方法和 catch 方法。当 Promise 的状态变为 resolved 时，我们将会在控制台输出 Promise 的结果；当 Promise 的状态变为 rejected 时，我们将会在控制台输出 Promise 的错误信息。
async/await
async/await 是 ES2017 中引入的新特性，它是 Promise 的语法糖，可以让我们更加方便地处理异步操作。在 TypeScript 中，async/await 的类型定义如下：
interface Promise<T> {
then<TResult1 = T, TResult2 = never>(onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | null | undefined, onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | null | undefined): Promise<TResult1 | TResult2>;
catch<TResult = never>(onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | null | undefined): Promise<T | TResult>;
finally(onfinally?: (() => void) | null | undefined): Promise<T>;
}
function __awaiter<T, U, V = never>(this: void, thisArg: U, _arguments: IArguments, generator: (this: U, ...args: any[]) => IterableIterator<T> | PromiseLike<T>, ...args: V[]): Promise<T>;接下来，我们将介绍 async/await 的使用方法。
async/await 基础
在 TypeScript 中，我们可以使用 async/await 来处理异步操作，例如：
// www.javascriptcn.com code example
function fetchData(): Promise<string> {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, TypeScript!');
}, 1000);
});
}
async function main() {
const data = await fetchData();
console.log(data);
}
main();在上面的示例中，我们定义了一个名为 main 的函数，该函数使用了 async/await。在 main 函数中，我们使用 await 关键字等待 fetchData 函数返回的 Promise 对象，当 Promise 的状态变为 resolved 后，我们将 Promise 的结果赋值给变量 data，并在控制台输出该变量。
async/await 链式调用
在 TypeScript 中，我们可以通过 async/await 的链式调用来处理多个异步操作，例如：
// www.javascriptcn.com code example
function fetchData(): Promise<string> {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('Hello, TypeScript!');
}, 1000);
});
}
function processData(data: string): Promise<string> {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(`${data} It's nice to meet you!`);
}, 1000);
});
}
async function main() {
const data = await fetchData();
const result = await processData(data);
console.log(result);
}
main();在上面的示例中，我们定义了一个名为 main 的函数，该函数使用了 async/await。在 main 函数中，我们先使用 await 关键字等待 fetchData 函数返回的 Promise 对象，当 Promise 的状态变为 resolved 后，我们将 Promise 的结果赋值给变量 data。接着，我们使用 await 关键字等待 processData 函数返回的 Promise 对象，并将 data 作为参数传入该函数。当 Promise 的状态变为 resolved 后，我们将 Promise 的结果赋值给变量 result，并在控制台输出该变量。
async/await 错误处理
在 TypeScript 中，我们可以使用 try/catch 语句来处理 async/await 的错误，例如：
// www.javascriptcn.com code example
function fetchData(): Promise<string> {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject('Error: Failed to fetch data!');
}, 1000);
});
}
async function main() {
try {
const data = await fetchData();
console.log(data);
} catch (error) {
console.error(error);
}
}
main();在上面的示例中，我们定义了一个名为 main 的函数，该函数使用了 async/await。在 main 函数中，我们使用 try/catch 语句捕获 fetchData 函数返回的 Promise 对象的错误。当 Promise 的状态变为 rejected 时，我们将会在控制台输出 Promise 的错误信息。
小结
在本篇文章中，我们介绍了 TypeScript 中的异步编程技巧与应用，包括 Promise 和 async/await。通过学习 Promise 和 async/await，我们可以更加方便地处理异步操作，提高代码的可读性和可维护性。在实际开发中，我们应该根据具体的业务需求选择合适的异步编程方式，并对代码进行优化和重构，以提高代码的性能和可靠性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d2329fa941bf713442eeda