您当前的位置:首页 > 电脑百科 > 程序开发 > 语言 > javascript

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

时间:2023-01-07 11:40:31  来源:今日头条  作者:启辰8

 

Async/await 是随 ES2017 版本在 JAVAScript 中引入的一种语言功能,可在 JavaScript 中启用异步、非阻塞行为。 它建立在promise之上,提供了一种更简单、更清晰的方式来处理异步代码。 Async/await 使得编写看起来和行为都像同步代码的异步代码成为可能,使其更易于阅读和理解。

在这篇博文中,我们将介绍 async/await 的基础知识及其工作原理,以及如何在代码中使用它的一些实际示例。

什么是is Async/Await?

Async/await 是一种处理 JavaScript 中异步代码的语法。 它允许您使用 async 和 await 关键字编写看起来和行为都像同步代码的异步代码。

这是 async/await 的一个简单示例:

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

async 关键字表示该函数是异步的并返回一个承诺。 await 关键字用于在继续执行下一行代码之前等待承诺解决。 在上面的示例中,await 关键字用于等待 fetch 调用完成以及 response.json() 调用解析。

Async/await 使得编写看起来和行为像同步代码,使其更易于阅读和理解。 它还使编写和维护异步代码变得更加容易,因为您不必处理承诺的复杂性。

Async/Await 如何工作?

Async/await建立在 promises 之上,它依赖于 Promise.prototype.then() 方法来处理异步行为。

以下是 async/await 工作原理的分解:

当一个异步函数被调用时,它返回一个承诺。在异步函数内部,您可以使用 await 关键字等待承诺解决。如果承诺解决,则返回承诺的值。 如果承诺被拒绝,则会抛出错误。这是一个使用 await 关键字等待承诺解决的异步函数示例:

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

在此示例中,await 关键字用于等待 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 关键字用于在将结果数据记录到控制台之前等待所有承诺完成。

处理错误

使用 async/await 时处理错误很重要,就像处理任何其他异步代码一样。 要处理异步函数中的错误,您可以使用 try 和 catch 关键字。

以下是如何处理异步函数中的错误的示例:

async function getData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.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,您可以编写看起来和行为都像同步代码的异步代码,使其更易于阅读和理解。



Tags:JavaScript   点击:()  评论:()
声明:本站部分内容及图片来自互联网,转载是出于传递更多信息之目的,内容观点仅代表作者本人,如有任何标注错误或版权侵犯请与我们联系(Email:2595517585@qq.com),我们将及时更正、删除,谢谢。
▌相关推荐
成为出色的问题解决者(这就是开发人员)没有捷径可走。精通是以练习为代价的。 由于算法和数据结构构成了每个软件的支柱,因此练习它们应该是您的首要任务。 作为最常用的存储...【详细内容】
2023-01-08  Tags: JavaScript  点击:(1)  评论:(0)  加入收藏
什么是代码测试覆盖率?在执行一组测试期间执行的代码百分比称为测试覆盖率。 它可以衡量有多少代码库经过了测试,并可能指出代码中可能没有接受足够测试的部分。 在这篇文章...【详细内容】
2023-01-08  Tags: JavaScript  点击:(1)  评论:(0)  加入收藏
Async/await 是随 ES2017 版本在 JavaScript 中引入的一种语言功能,可在 JavaScript 中启用异步、非阻塞行为。 它建立在promise之上,提供了一种更简单、更清晰的方式来处理...【详细内容】
2023-01-07  Tags: JavaScript  点击:(0)  评论:(0)  加入收藏
JavaScript 是一种轻量级的解释型编程语言。它最初是为在网络浏览器中使用而开发的,但后来发现了其他用途,包括服务器端脚本、游戏开发、数据可视化和机器学习。JavaScript 是...【详细内容】
2023-01-03  Tags: JavaScript  点击:(14)  评论:(0)  加入收藏
了解这33个JavaScript概念绝对会让你将来的职业生涯受益无穷。话不多说,直接进入主题!1. 调用栈 调用栈是解释器(如web浏览器中的JavaScript解释器)跟踪其在调用多个函数的脚本...【详细内容】
2022-12-24  Tags: JavaScript  点击:(19)  评论:(0)  加入收藏
摘要:在前不久刚发布的 GitHub 年度报告中,Java 依旧是最受程序员欢迎的编程语言,而想要成为一名优秀的 Java 程序员,这 7 个 GitHub 代码库可能会提供助力。链接:https://java.p...【详细内容】
2022-11-29  Tags: JavaScript  点击:(21)  评论:(0)  加入收藏
JavaScript奇淫技巧:20行代码,实现屏幕录像本文展示一个技巧,可以给任何网站、网页实现屏幕录像功能。即使你不是网站的管理者,也可以给它添加录制功能。方法如下:复制一段JS代码...【详细内容】
2022-11-18  Tags: JavaScript  点击:(18)  评论:(0)  加入收藏
计算距离下次生日还有多少天注意这里借助 moment 实现 getBirthdayFun(){ // 首先要获取到今年的生日 let birthdayTime = moment().format('YYYY-'...【详细内容】
2022-10-28  Tags: JavaScript  点击:(46)  评论:(0)  加入收藏
作 者 | 肖荣强(路迁)写在前面为了提升应用稳定性,我们对前端项目开展了脚本异常治理的工作,对生产上报的js error进行了整体排查,试图通过降低脚本异常的发生频次来提升相关...【详细内容】
2022-10-27  Tags: JavaScript  点击:(33)  评论:(0)  加入收藏
框架之战是 JavaScript 社区中的热门话题,也是业界众多圣战之一。一开始,jQuery 崭露头角,接下来 AngularJS 初露锋芒,再到现代框架混战,战争一直很激烈。然而现在框架之战已经...【详细内容】
2022-09-02  Tags: JavaScript  点击:(111)  评论:(0)  加入收藏
▌简易百科推荐
成为出色的问题解决者(这就是开发人员)没有捷径可走。精通是以练习为代价的。 由于算法和数据结构构成了每个软件的支柱,因此练习它们应该是您的首要任务。 作为最常用的存储...【详细内容】
2023-01-08  启辰8  今日头条  Tags: JavaScript   点击:(1)  评论:(0)  加入收藏
什么是代码测试覆盖率?在执行一组测试期间执行的代码百分比称为测试覆盖率。 它可以衡量有多少代码库经过了测试,并可能指出代码中可能没有接受足够测试的部分。 在这篇文章...【详细内容】
2023-01-08  启辰8  今日头条  Tags:JavaScript   点击:(1)  评论:(0)  加入收藏
Async/await 是随 ES2017 版本在 JavaScript 中引入的一种语言功能,可在 JavaScript 中启用异步、非阻塞行为。 它建立在promise之上,提供了一种更简单、更清晰的方式来处理...【详细内容】
2023-01-07  启辰8  今日头条  Tags:JavaScript   点击:(0)  评论:(0)  加入收藏
译者 | 涂承烨由于代码可见性低,使用Java脚本进行编码可能会很耗时。这里有12个优雅的JavaScript技巧,可以帮助你在2023年优化代码生成。JavaScript已经成为下一批开发人员中...【详细内容】
2023-01-06    51CTO  Tags:JavaScript   点击:(10)  评论:(0)  加入收藏
WebRTC vs WebSocket1.什么是WebRTC?WebRTC 是一组 JavaScript API,可以在两个浏览器之间建立点对点连接, 实现音频和视频等数据的传输,也可以用它创建有语音/视频通话功能的应...【详细内容】
2023-01-04  前端进阶  今日头条  Tags:WebRTC   点击:(24)  评论:(0)  加入收藏
JavaScript 是一种轻量级的解释型编程语言。它最初是为在网络浏览器中使用而开发的,但后来发现了其他用途,包括服务器端脚本、游戏开发、数据可视化和机器学习。JavaScript 是...【详细内容】
2023-01-03  游戏开发乔     Tags:JavaScript   点击:(14)  评论:(0)  加入收藏
有时候,我们需要知道当前网络的状态来做一些事情,以提升用户体验,这节课,我们来看一下,如何使用 JavaScript 来检测用户是否在线。检测连接状态我们可以利用navigator.onLine API...【详细内容】
2023-01-03  前端小智  今日头条  Tags:JavaScript   点击:(10)  评论:(0)  加入收藏
在PC时代,曾有个名为“变速齿轮”的神奇软件,可以加快或减慢系统时间。当时常用来修改游戏速度,可实现外挂一般的效果,很不可思议。本文,将用JavaScript复刻这一功能,实现一个用于...【详细内容】
2022-12-27   WangLiwen   网易号  Tags:JavaScript   点击:(14)  评论:(0)  加入收藏
了解这33个JavaScript概念绝对会让你将来的职业生涯受益无穷。话不多说,直接进入主题!1. 调用栈 调用栈是解释器(如web浏览器中的JavaScript解释器)跟踪其在调用多个函数的脚本...【详细内容】
2022-12-24  程序猿最幽默  今日头条  Tags:JavaScript   点击:(19)  评论:(0)  加入收藏
使用NodeJS开发的应用,如果需要处理大量数据,可能导致堆溢出。错误提示中,会有“JavaScript heap out of memory”,如下图:通过调试分析,会发现:在出错之前,其使用的内存量是一直增...【详细内容】
2022-12-11    网易号  Tags:NodeJS   点击:(33)  评论:(0)  加入收藏
站内最新
站内热门
站内头条