JS异步编程有哪些方案?为什么会出现这些方案?

开发 前端
关于 JS 单线程、EventLoop 以及异步 I/O 这些底层的特性,我们之前做过了详细的拆解,不在赘述。

 [[320125]]

关于 JS 单线程、EventLoop 以及异步 I/O 这些底层的特性,我们之前做过了详细的拆解,不在赘述。在探究了底层机制之后,我们还需要对代码的组织方式有所理解,这是离我们最日常开发最接近的部分,异步代码的组织方式直接决定了开发和维护的效率,其重要性也不可小觑。尽管底层机制没变,但异步代码的组织方式却随着 ES 标准的发展,一步步发生了巨大的变革。接着让我们来一探究竟吧!

回调函数时代

相信很多 nodejs 的初学者都或多或少踩过这样的坑,node 中很多原生的 api 就是诸如这样的:

  1. fs.readFile('xxx', (err, data) => { 
  2.  
  3. }); 

典型的高阶函数,将回调函数作为函数参数传给了readFile。但久而久之,就会发现,这种传入回调的方式也存在大坑, 比如下面这样:

  1. fs.readFile('1.json', (err, data) => { 
  2.     fs.readFile('2.json', (err, data) => { 
  3.         fs.readFile('3.json', (err, data) => { 
  4.             fs.readFile('4.json', (err, data) => { 
  5.  
  6.             }); 
  7.         }); 
  8.     }); 
  9. }); 

回调当中嵌套回调,也称回调地狱。这种代码的可读性和可维护性都是非常差的,因为嵌套的层级太多。而且还有一个严重的问题,就是每次任务可能会失败,需要在回调里面对每个任务的失败情况进行处理,增加了代码的混乱程度。

Promise 时代

ES6 中新增的 Promise 就很好了解决了回调地狱的问题,同时了合并了错误处理。写出来的代码类似于下面这样:

  1. readFilePromise('1.json').then(data => { 
  2.     return readFilePromise('2.json'
  3. }).then(data => { 
  4.     return readFilePromise('3.json'
  5. }).then(data => { 
  6.     return readFilePromise('4.json'
  7. }); 

以链式调用的方式避免了大量的嵌套,也符合人的线性思维方式,大大方便了异步编程。

co + Generator 方式

利用协程完成 Generator 函数,用 co 库让代码依次执行完,同时以同步的方式书写,也让异步操作按顺序执行。

  1. co(function* () { 
  2.   const r1 = yield readFilePromise('1.json'); 
  3.   const r2 = yield readFilePromise('2.json'); 
  4.   const r3 = yield readFilePromise('3.json'); 
  5.   const r4 = yield readFilePromise('4.json'); 
  6. }) 

async + await方式

这是 ES7 中新增的关键字,凡是加上 async 的函数都默认返回一个 Promise 对象,而更重要的是 async + await 也能让异步代码以同步的方式来书写,而不需要借助第三方库的支持。

  1. const readFileAsync = async function () { 
  2.   const f1 = await readFilePromise('1.json'
  3.   const f2 = await readFilePromise('2.json'
  4.   const f3 = await readFilePromise('3.json'
  5.   const f4 = await readFilePromise('4.json'

这四种经典的异步编程方式就简单回顾完了,由于是鸟瞰大局,我觉得知道是什么比了解细节要重要, 因此也没有展开。不过没关系,接下来,让我们针对这些具体的解决方案,一步步深入异步编程,理解其中的本质。

责任编辑:武晓燕 来源: 前端三元同学
相关推荐

2019-01-17 10:58:52

JS异步编程前端

2011-05-17 08:58:29

软件项目经理

2020-09-29 15:24:07

面试数据结构Hashmap

2023-05-15 08:34:36

css浮动

2023-09-20 14:54:17

MySQL

2010-04-07 16:33:56

Oracle删除

2021-06-28 08:10:59

JavaScript异步编程

2016-10-27 21:33:46

ReduxFlux异步方案

2024-01-31 10:11:41

Redis内存

2019-09-09 10:09:51

分布式事务 数据库

2010-07-20 11:31:25

SQL Server避

2010-07-08 13:13:14

清除SQL Serve

2021-06-09 10:06:08

5G5G网络漏洞

2018-05-13 21:57:04

JavaScript异步编程方案

2010-03-24 10:56:05

Python线程编程

2010-07-22 14:16:59

SQL Server

2015-07-29 10:58:21

2010-06-04 16:12:39

MYSQL_ASSOC

2020-01-13 16:48:38

手机5G流量

2022-07-06 08:25:17

服务网格Kubernetes
点赞
收藏

51CTO技术栈公众号