TypeScript 中如何使用 Promise 和 async/await 进行异步编程-JavaScript中文网-JavaScript教程资源分享门户

异步编程简介

在前端开发中，异步编程是不可避免的。从发送网络请求到接收数据、从读取文件到显示资源，这些操作都需要异步处理。在 JavaScript 中，异步编程的常见方式是通过回调函数来处理。然而，回调函数可能会导致回调地狱问题，使代码难以阅读和维护。为了解决这个问题，可以使用 Promise 和 async/await 来进行异步编程。

Promise

Promise 是一种异步编程模型，用于处理异步操作的结果。它可以有效地解决回调地狱问题，并使代码更加清晰和易于维护。在 TypeScript 中，使用 Promise 的方式通常如下：

// javascriptcn.com 代码示例
function getData() : Promise<string> {
    return new Promise<string>((resolve, reject) =>{
        setTimeout(() => {
            const data = 'data';
            if (data) {
                resolve(data);
            } else {
                reject(new Error('Error'));
            }
        }, 1000);
    });
}

getData().then((data) => {
    console.log(data);
}).catch((error) => {
    console.log(error);
});

创建 Promise 对象。Promise 构造函数接受一个函数作为参数，该函数具有两个参数：resolve 和 reject。resolve 是一个函数，在返回异步操作成功时调用，reject 是一个函数，在返回异步操作失败时调用。
setTimeout 模拟异步操作，返回一个字符串。
使用 then 方法处理异步操作成功的结果，使用 catch 方法处理异步操作失败的情况。

async/await

async/await 是 ES2017 中引入的一种处理异步操作的方式。它是基于 Promise 的，但可使异步代码的编写方式更类似于同步代码，从而更利于阅读和维护。在 TypeScript 中，使用 async/await 的方式通常如下：

// javascriptcn.com 代码示例
function getData() : Promise<string> {
    return new Promise<string>((resolve, reject) =>{
        setTimeout(() => {
            const data = 'data';
            if (data) {
                resolve(data);
            } else {
                reject(new Error('Error'));
            }
        }, 1000);
    });
}

async function main() {
    try {
        const data = await getData();
        console.log(data);
    } catch (error) {
        console.log(error);
    }
}

main();

在 main 函数前添加 async 关键字。这告诉 TypeScript 编译器，该函数内有可能使用 await 关键字等待异步操作完成。
在 main 函数内使用 try/catch 语句处理异步操作成功或失败的情况。
使用 await 关键字等待异步操作完成，并在 data 中接收结果。

总结

使用 Promise 和 async/await 构建异步编程在 TypeScript 中是一种高效的方法，能够有效地解决回调地狱问题，并将异步代码的编写方式更类似于同步代码，从而更利于阅读和维护。开发者可以根据具体需求选择使用哪种方法，提高编写代码的效率。

示例代码

示例代码：https://codepen.io/anon/pen/xbeWQO

在该示例代码中，使用 fetch 获取数据，并将其处理成 HTML 代码。在这之前，在 HTML 文档中添加了一个 button，点击该按钮会展示数据。getData 函数返回一个 Promise 对象，并通过 then 方法接收数据结果，并将其传递给 processData 函数。processData 函数等待异步代码完成，并将返回的数据处理成 HTML 代码。main 函数使用 async/await 编写，并等待异步代码完成。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/6540c0457d4982a6eba4d2a8