了解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中异步的处理方式有哪些