JavaScript中异步的处理方式有哪些

  介绍

了解JavaScript中异步的处理方式有哪些?这个问题可能是我们日常学习或工作经常见到的。希望通过这个问题能让你收获颇深。下面是小编给大家带来的参考内容,让我们一起来看看吧!

<强>同步?异步?

首先当然要先理解一下同步及异步分别是指什么。

这两个名词对于初学者来说总是让人感到困惑的,毕竟从中文字面上的意思很容易让人反过来理解,从信息科学的角度来说,同步指的是一件一件做的事,而异步则是很多事情在一起并行的处理。

比如我们去银行办理业务,在窗口前排队就是同步执行,而拿到号码先去做别的事情的就是异步执行;通过事件循环的特性,在JavaScript处里异步事件可说是轻而易举的

那么在JavaScript中处理异步事件的方法是什么呢?

<强>回调函数

我们最熟悉最的就是回调函数了,例如网页与用户进行互动时注册的事件监听器,就需要接收一个回调函数;或是其他Web API的各种功能如<代码> setTimeout ,<代码> xhr> setTimeout> //回调   函数withCallback () {   console.log(& # 39;开始# 39;)   setTimeout(()=比;{   回调函数console.log (& # 39; # 39;)   },1000)   console.log(& # 39;完成# 39;)   }withCallback ()//开始//完成//回调函数

在<代码> setTimeout>

注意:也就时因为这种机制,开发者设定给<代码> setTimeout>

回调函数虽然在开发中十分常见,但也有许多难以避免的问题,例如由于函数需要被传递给其他函数,开发者难以掌控其他函数内的处理逻辑;又因为回调函数仅能配合<代码> try…catch代码捕捉错误,当异步错误发生时难以控制;另外还有最著名的“回调地狱”。

<强>承诺

幸好在ES6之后出现了承诺,拯救了身陷在地狱的开发者们。其基本用法也很简单:

函数withPromise () {   返回新的承诺(解决=比;{   console.log(& # 39;承诺func # 39;)   解决()   })   }   withPromise ()   不要犹豫(()=比;console.log(& # 39;然后1 & # 39;))   不要犹豫(()=比;console.log (& # 39; 2 & # 39;))//保证函数//1//2

之前讨论事件循环时没有提到的是,在HTML 5的Web API标准中,事件循环新增了微任务队列(微任务队列),而承诺正是通过微任务队列来驱动它的;微任务队列的触发时机是在栈被清空时,JavaScript引擎会先确认微任务队列有没有东西,有的话就优先执行,直到清空后才从队列拿出新任务到栈上。

如上面的例子,当函数回传一个承诺时,JavaScript引擎便会把后传入的函数放到微任务队列中,反复循环,输出了上列的结果。后续的,<代码>。然后代码> 的承诺。解决>

如果在例子中加上<代码> setTimeout> 函数withPromise () {   返回新的承诺(解决=比;{   console.log(& # 39;承诺func # 39;)   解决()   })   }   withPromise ()   不要犹豫(()=比;console.log(& # 39;然后1 & # 39;))   不要犹豫(()=比;setTimeout(()=比;console.log (& # 39; settimeout # 39;), 0))   不要犹豫(()=比;console.log (& # 39; 2 & # 39;))//保证函数//1//2→微任务优先执行//setTimeout

另外,前面所说的回调函数很难处理的异步错误,也可以通过<代码>。捕获代码语法来捕获。

函数withPromise () {   返回新的承诺(解决=比;{   console.log(& # 39;承诺func # 39;)   解决()   })   }   withPromise ()   不要犹豫(()=比;console.log(& # 39;然后1 & # 39;))   不要犹豫(()=比;{抛出新的错误(& # 39;错误# 39;)})   不要犹豫(()=比;console.log (& # 39; 2 & # 39;))   .catch ((err)=比;console.log(& # 39;抓:& # 39;,犯错))//保证函数//1//捕获:错误//砦蟮饔枚颜?/pre>

<强>异步等待

从ES6承诺问世之后,异步代码从回呼地狱逐渐变成了优雅的函数式管道处理,但对于不熟悉度的开发者来说,只不过是从回调地狱变成了承诺地狱而已。

JavaScript中异步的处理方式有哪些