处理异步事件的三种方式

开发 前端
本文简单介绍了 JavaScript 处理异步的三种方式,并通过一些简单的例子说明代码的执行顺序。

在网站开发中,异步事件是项目必然需要处理的一个环节,也因为前端框架的兴起,通过框架实现的 SPA 已经是快速建构网站的标配了,一部获取数据也就成了不可或缺的一环;本文来就讲一讲 JavaScript 中异步的处理方式。

[[349669]]

同步?异步?

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

这两个名词对于初学者来说总是让人感到困惑的,毕竟从中文字面上的意思很容易让人反过来理解,从信息科学的角度来说,[同步](https:// developer.mozilla.org/en-US/docs/Glossary/Synchronous) 指的是一件一件做事,而 异步 则是很多事情在一起并行的处理。

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

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

回调函数

我们最熟悉最的就是回调函数了。例如网页与用户进行互动时注册的事件监听器,就需要接收一个回调函数;或是其他 Web API 的各种功能如 setTimeout、xhr,也都能通过传递回调函数在用户要求的时机去触发。先看一个 setTimeout 的例子:

  1. // callback 
  2. function withCallback() { 
  3.   console.log('start') 
  4.   setTimeout(() => { 
  5.     console.log('callback func') 
  6.   }, 1000) 
  7.   console.log('done') 
  8. }withCallback() 
  9. // start 
  10. // done 
  11. // callback func 

在 setTimeout 被执行后,当过了指定的时间间隔之后,回调函数会被放到队列的末端,再等待事件循环处理到它。

注意:也就时因为这种机制,开发者设定给 setTimeout 的时间间隔,并不会精准的等于从执行到触发所经过的时间,使用时要特别注意!

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

Promise

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

  1. function withPromise() { 
  2.   return new Promise(resolve => { 
  3.     console.log('promise func') 
  4.     resolve() 
  5.   }) 
  6. withPromise() 
  7.   .then(() => console.log('then 1')) 
  8.   .then(() => console.log('then 2')) 
  9. // promise func 
  10. // then 1 
  11. // then 2 

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

如上面的例子,当函数回传一个 Promise 时,JavaScript 引擎便会把后传入的函数放到微任务队列中,反复循环,输出了上列的结果。后续的 .then 语法会回传一个新的 Promise,参数函数则接收前一个 Promise.resolve 的结果,凭借这样函数参数传递,让开发者可以管道式的按顺序处理异步事件。

如果在例子中加上 setTimeout 就更能清楚理解微任务与一般任务的差别:

  1. function withPromise() { 
  2.   return new Promise(resolve => { 
  3.     console.log('promise func') 
  4.     resolve() 
  5.   }) 
  6. withPromise() 
  7.   .then(() => console.log('then 1')) 
  8.   .then(() => setTimeout(() => console.log('setTimeout'), 0)) 
  9.   .then(() => console.log('then 2')) 
  10. // promise func 
  11. // then 1 
  12. // then 2 -> 微任务优先执行 
  13. // setTimeout 

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

  1. function withPromise() { 
  2.   return new Promise(resolve => { 
  3.     console.log('promise func') 
  4.     resolve() 
  5.   }) 
  6. withPromise() 
  7.   .then(() => console.log('then 1')) 
  8.   .then(() => { throw new Error('error') }) 
  9.   .then(() => console.log('then 2')) 
  10.   .catch((err) => console.log('catch:', err)) 
  11. // promise func 
  12. // then 1 
  13. // catch: error 
  14. //   ...error call stack 

async await

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

在 ES8 中规范了新的 async/await,虽然只是 Promise 和 Generator Function组合在一起的语法糖,但通过 async/await 便可以将异步事件用同步语法来处理,就好像是老树开新花一样,写起来的风格与 Promise 完全不同:

  1. function wait(time, fn) { 
  2.   return new Promise(resolve => { 
  3.     setTimeout(() => { 
  4.       console.log('wait:', time) 
  5.       resolve(fn ? fn() : time) 
  6.     }, time) 
  7.   }) 
  8. await wait(500, () => console.log('bar')) 
  9. console.log('foo') 
  10. // wait: 500 
  11. // bar 
  12. // foo 

通过把 setTimeout 包装成 Promise,再用 await 关键字调用,可以看到结果会是同步执行的先出现 bar,再出现 foo,也就是开头提到的将异步事件写成同步处理。

再看一个例子:

  1. async function withAsyncAwait() { 
  2.   for(let i = 0; i < 5; i++) { 
  3.     await wait(i*500, () => console.log(i)) 
  4.   } 
  5. }await withAsyncAwait() 
  6. // wait: 0 
  7. // 0 
  8. // wait: 500 
  9. // 1 
  10. // wait: 1000 
  11. // 2 
  12. // wait: 1500 
  13. // 3 
  14. // wait: 2000 
  15. // 4 

代码中实现了withAsyncAwait 函数,用 for 循环及 await 关键字反复执行 wait 函数;此处执行时,循环每次会按顺序等待不同的秒数再执行下一次循环。

在使用 async/await 时,由于 await 关键字只能在 async function 中执行,使用时务必要记得要同时使用。

另外在用循环处理异步事件时,需要注意在 ES6 之后提供的很多 Array 方法都不支持 async/await 语法,如果这里用 forEach 取代 for,结果会变成同步执行,每隔 0.5 秒就打印出数字。

总结

本文简单介绍了 JavaScript 处理异步的三种方式,并通过一些简单的例子说明代码的执行顺序;呼应前面提到的事件循环,再其中加入了微任务队列的概念。希望帮你理解同步和异步的应用。

 

责任编辑:赵宁宁 来源: 前端先锋
相关推荐

2009-06-09 16:53:22

Java Swing处理方法比较

2021-06-24 08:52:19

单点登录代码前端

2014-12-31 17:42:47

LBSAndroid地图

2021-11-05 21:33:28

Redis数据高并发

2019-11-20 18:52:24

物联网智能照明智能恒温器

2012-07-17 09:16:16

SpringSSH

2021-11-11 11:24:54

JavaScript模型事件

2023-08-22 07:05:34

PowerShellWindows

2011-07-25 12:41:38

接入方式布线

2009-07-29 09:36:07

无线通信接入方式

2017-07-14 15:07:23

2010-09-13 12:19:03

2010-08-24 09:43:33

2018-04-02 14:29:18

Java多线程方式

2021-11-26 11:07:14

cowsay命令Linux

2023-12-04 09:31:13

CSS卡片

2010-03-12 17:52:35

Python输入方式

2009-07-03 18:32:18

JSP页面跳转

2014-07-30 17:10:38

LVS集群负载均衡

2020-09-16 23:14:35

物联网校园安全IOT
点赞
收藏

51CTO技术栈公众号