TypeScript 中的 async/await 异步编程技巧
在现代 Web 应用程序中，异步编程变得越来越重要。这是因为现代应用程序需要同时处理多个数据源、处理 I/O 操作和处理用户输入等事件。为了避免阻塞应用程序的 UI，我们需要程序可以在后台线程中运行。JavaScript 中有很多方法来实现异步编程，其中 async/await 是一种最常见的方式。在本文中，我们将深入研究 TypeScript 中的 async/await 异步编程技巧。
什么是 async/await？
async/await 是 ES2017 中的一个新语法，它使得异步代码看起来像同步代码一样。它可以减少回调地狱（callback hell）的嵌套，使异步代码更加可读性和易于维护。在 TypeScript 中使用 async/await 时，我们需要在函数前面加上 async 关键字。这个函数从语义上来说是异步的，因为它最终会返回一个 promise。
语法格式：
async function someFunction(): Promise<void> {
// 异步任务
return;
}在异步函数中，我们可以使用 await 关键字等待一个 promise。这将暂停函数的执行，并在 promise 解决或拒绝时恢复它的执行。如果 promise 在等待时被拒绝，它将抛出一个异常。否则，它会返回 promise 的解决值。
例如，让我们考虑一个简单的异步任务，它从服务器获取一些数据。我们可以使用 fetch 函数来执行 HTTP 请求，然后等待该 promise 完成：
async function getData() {
const url = 'https://jsonplaceholder.typicode.com/todos/1';
const response = await fetch(url);
const data = await response.json();
console.log(data);
}在上面的代码中，我们定义了一个名为 getData() 的异步函数。它会调用 fetch() 函数，该函数返回一个 promise。如果 promise 成功，则数据将从服务器请求成功，并使用 response.json() 函数提取 JSON 数据。最后，我们使用 console.log() 函数记录到控制台。
错误处理
当我们等待 promise 时，我们可以使用 try/catch 语句来捕获异常：
-- -------------------- ---- -------
----- -------- --------- -
--- -
----- --- - -----------------------------------------------
----- -------- - ----- -----------
----- ---- - ----- ----------------
------------------
- ----- ------- -
----------------------- -------
-
-在上面的代码中，我们使用 try/catch 语句来处理 fetch() 和 response.json() 的拒绝情况。如果发生错误，它将抛出一个异常，并被 catch 代码块捕获。 catch 块中的代码将负责处理错误。
串行执行异步任务
前面我们看到了如何从服务器获取数据的例子。让我们现在假设我们需要执行两个异步操作，并使用第一个异步操作的结果来执行第二个异步操作。在这种情况下，我们需要确保异步操作之间是连续发生的，否则第二个异步操作将无法访问第一个异步操作的结果。
例如，假设我们从服务器获取用户信息，接下来要获取该用户的订单信息：
async function getUserInfo() {
const userInfo = await fetch('https://jsonplaceholder.typicode.com/users/1');
const user = await userInfo.json();
const orderInfo = await fetch(`https://jsonplaceholder.typicode.com/todos?userId=${user.id}`);
const orders = await orderInfo.json();
console.log(user, orders);
}在上面的代码中，我们从服务器获取用户信息，等待 promise 完成。接着，我们使用用户 ID 来执行第二个异步操作，获取该用户的订单信息。最后，我们将用户信息和订单信息记录到控制台。
并行执行异步任务
在某些情况下，您可能需要并行执行多个异步操作。在这种情况下，我们可以使用 Promise.all() 函数组合多个 promise 并等待它们都完成。
例如，假设我们有两个异步任务，它们分别从两个不同的服务器获取数据：
-- -------------------- ---- -------
----- -------- --------- -
----- ---- - -
-----------------------------------------------
----------------------------------------------
--
----- -------- - ------------ -- ------------
----- ----------- ---------- - ----- ----------------------
----- ----- - ----- -----------------
----- ----- - ----- -----------------
------------------ -------
-在上面的代码中，我们有两个不同的 URL，我们将它们存储在一个包含 URL 数组的变量中。接着，我们使用 map() 函数并调用 fetch() 函数，为每个 URL 创建一个 promise 数组。最后，我们使用 Promise.all() 函数等待所有 promise 解决，然后从每个返回的 response 中提取数据。
结论
本文介绍了 TypeScript 中使用 async/await 异步编程的技巧。我们学习了如何等待 promise、捕捉错误、串行执行和并行执行异步任务等。async/await 让异步代码看起来像同步代码，给代码的可读性和可维护性带来了很大的提升。如果您是前端开发人员，async/await 一定是您应该掌握的技能。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/671cb1819babaf620fb1fc84