精通 JavaScript 中的 Async/Await:异步编程实用指南

2023-05-27 0 584

精通 JavaScript 中的 Async/Await:异步编程实用指南

Async/await 是随 ES2017 版在 JavaScript 中导入的一类词汇机能,可在 JavaScript 中投入使用触发器、非堵塞犯罪行为。 它创建在promise其内,提供更多了一类更单纯、更清晰的形式来处置触发器标识符。 Async/await 使撰写看上去和犯罪行为都像并行标识符的触发器标识符正式成为可能将,使其更更易写作和认知。

在这篇昌明中,他们将如是说 async/await 的基本知识或其组织工作基本原理,以及怎样在标识符中采用它的许多前述实例。

甚么是is Async/Await?

Async/await 是一类处置 JavaScript 中触发器标识符的句法。 它容许您采用 async 和 await URL编写看上去和犯罪行为都像并行标识符的触发器标识符。

这是 async/await 的两个单纯实例:

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

async URL则表示该表达式是触发器的并回到两个允诺。 await URL用作在拒绝执行下带队标识符以后等候允诺化解。 在下面的实例中,await URL用作等候 fetch 初始化顺利完成和 response.json() 初始化导出。

Async/await 使撰写看上去和犯罪行为像并行标识符,使其更更易写作和认知。 它还使撰写和保护触发器标识符显得更为难,即使您无须处置允诺的复杂程度。

Async/Await 怎样组织工作?

Async/await创建在 promises 其内,它依赖于 Promise.prototype.then() 方法来处置触发器犯罪行为。

以下是 async/await 组织工作基本原理的分解:

当两个触发器表达式被初始化时,它回到两个允诺。在触发器表达式内部,您可以采用 await URL等候允诺化解。如果允诺化解,则回到允诺的值。 如果允诺被拒绝,则会抛出错误。这是两个采用 await URL等候允诺化解的触发器表达式实例:

async function getData() { try { const response = await fetch(https://api.example.com/data); const data = await response.json(); returndata; }catch (error) { console.error(error); } }

在此实例中,await URL用作等候 fetch 初始化顺利完成和 response.json() 初始化导出。 如果 promise 被拒绝(例如,如果进行 fetch 初始化时出错),错误将在 catch 块中捕获并记录到控制台。

采用Async/Await

现在他们对 async/await 的组织工作基本原理有了基本的了解,让他们看许多怎样在标识符中采用它的前述实例。

发出触发器 HTTP 请求

async/await 的两个常见用例是发出触发器 HTTP 请求。 采用 async/await 可以轻松地并行执行多个 HTTP 请求,并在拒绝执行标识符中的下一步以后等候结果。

下面是采用 async/await 并行发出多个 HTTP 请求的实例:

async function getData() { const[response1, response2, response3] =await Promise.all([ fetch(https://api.example.com/data1), fetch(https://api.example.com/data2), fetch(https://api.example.com/data3) ]); const data1 = await response1.json(); const data2 = await response2.json(); const data3 = await response3.json(); console.log(data1, data2, data3); }

在此实例中,他们采用 Promise.all() 方法并行发出多个 HTTP 请求。 await URL用作在将结果数据记录到控制台以后等候所有允诺顺利完成。

处置错误

采用 async/await 时处置错误很重要,就像处置任何其他触发器标识符一样。 要处置触发器表达式中的错误,您可以采用 try 和 catch URL。

以下是怎样处置触发器表达式中的错误的实例:

async function getData() { try { const response = await fetch(https://api.example.com/data); const data = awaitresponse.json();return data; } catch (error) { console.error(error); } }

在此实例中,try 块包含可能将引发错误的代码,而 catch 块包含将处置错误的标识符。 如果在 try 块中抛出错误,它将在 catch 块中捕获并记录到控制台。

链接触发器表达式

触发器表达式可以像 promises 一样链接在一起。 当您需要按特定顺序执行多个触发器操作时,这会很有用。

下面是两个链接触发器表达式的例子:

async function getData() { const response = await fetch(https://api.example.com/data); const data = await response.json(); return data; } async function processData(data) { // do something with the data return processedData; } async function displayData() { const data = await getData(); const processedData = await processData(data); console.log(processedData); } displayData();

在此实例中,他们有三个触发器表达式:getData、processData 和 displayData。 displayData 表达式初始化getData 表达式并等候其导出,然后再初始化processData 表达式并等待其导出。 然后将生成的处置数据记录到控制台。

Async/Await vs Promises

Async/await 创建在 promises 其内,它提供更多了一类更简洁、更单纯的方法来撰写采用 promises 的触发器标识符。 但是,在某些情况下,您可能将希望直接采用 promises 而不是 async/await。

直接采用 promises 的原因之一是,如果您需要采用 async/await 无法采用的 Promise API 机能。 例如,您可能将希望采用 Promise.prototype.finally() 方法在允诺被化解或拒绝后执行标识符,而不管结果怎样。 这对于清理资源或记录允诺的结果很有用。

下面是两个采用带有允诺的 finally() 方法的例子:

fetch(https://api.example.com/data) .then(response =>response.json()) .then(data => { // do something with the data }) .catch(error => { console.error(error); }) .finally(() => { console.log(request complete); });

在此实例中,finally() 方法在 promise 被化解或被拒绝后被初始化,并将一条消息记录到控制台。

直接采用 promises 的另两个原因是,如果您需要采用不支持 async/await 的旧版浏览器。 在这种情况下,您可以采用 polyfill 为旧版浏览器添加对触发器/等待的支持。

结论

Async/await 是一类强大的词汇特性,可以更轻松地撰写和认知 JavaScript 中的触发器标识符。 它创建在 promises 其内,提供更多了一类更简洁、更难的形式来处置触发器犯罪行为。 采用 async/await,您可以撰写看上去和犯罪行为都像并行标识符的触发器标识符,使其更更易写作和认知。

相关文章

发表评论
暂无评论
官方客服团队

为您解决烦忧 - 24小时在线 专业服务