绑定完请刷新页面
取消
刷新

分享好友

×
取消 复制
细说JS异步发展历程
2020-05-21 12:00:25

知其然知其所以然,首先了解三个概念:

1.什么是同步?

所谓同步,就是在发出一个"调用"时,在没有得到结果之前,该“调用”就不返回。但是一旦调用返回,就得到返回值了。换句话说,就是由“调用者”主动等待这个“调用”的结果。此调用执行完之前,阻塞之后的代码执行。

2.什么是异步?

"调用"在发出之后,这个调用就直接返回了,没有返回结果。换句话说,当一个异步过程调用发出后,调用者不会立刻得到结果。而是在"调用"发出后,"被调用者"通过状态、通知来通知调用者,或通过回调函数处理这个调用。异步调用发出后,不影响后面代码的执行。

3.JavaScript 中为什么需要异步?

首先我们知道JavaScript是单线程的(即使新增了webworker,但是本质上JS还是单线程)。同步代码意味着什么呢?意味着有可能会阻塞,当我们有一个任务需要时间较长时,如果使用同步方式,那么就会阻塞之后的代码执行。而异步则不会,我们不会等待异步代码的执行,继续执行异步任务之后的代码。

概念了解完了,我们就要进入今天的正题了。首先大家思考一下:平时在工作中,主要使用了哪些异步解决方案,这些异步方案有什么优缺点?

异步早的解决方案是回调函数,如事件的回调,setInterval/setTimeout中的回调。但是回调函数有一个很常见的问题,就是回调地狱的问题(稍后会举例说明);

为了解决回调地狱的问题,社区提出了Promise解决方案,ES6将其写进了语言标准。Promise一定程度上解决了回调地狱的问题,但是Promise也存在一些问题,如错误不能被try catch,而且使用Promise的链式调用,其实并没有从根本上解决回调地狱的问题,只是换了一种写法。

ES6中引入 Generator 函数,Generator是一种异步编程解决方案,Generator 函数是协程在 ES6 的实现,大特点就是可以交出函数的执行权,Generator 函数可以看出是异步任务的容器,需要暂停的地方,都用yield语句注明。但是 Generator 使用起来较为复杂。

ES7又提出了新的异步解决方案:async/await,async是 Generator 函数的语法糖,async/await 使得异步代码看起来像同步代码,异步编程发展的目标就是让异步逻辑的代码看起来像同步一样。

回调函数 ---> Promise ---> Generator ---> async/await.

1.callback

  1. //node读取文件

  2. fs.readFile(xxx, 'utf-8', function(err, data) {

  3. //code

  4. });

回调函数的使用场景(包括但不限于):

  1. 事件回调

  2. Node API

  3. setTimeout/setInterval中的回调函数

  4. ajax 请求

回调函数的优点: 简单。

回调函数的缺点:

异步回调嵌套会导致代码难以维护,并且不方便统一处理错误,不能 trycatch 和 回调地狱(如先读取A文本内容,再根据A文本内容读取B再根据B的内容读取C...)。

  1. fs.readFile(A, 'utf-8', function(err, data) {

  2. fs.readFile(B, 'utf-8', function(err, data) {

  3. fs.readFile(C, 'utf-8', function(err, data) {

  4. fs.readFile(D, 'utf-8', function(err, data) {

  5. //....

  6. });

  7. });

  8. });

  9. });

2.Promise

Promise 一定程度上解决了回调地狱的问题,Promise 早由社区提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。

那么我们看看Promise是如何解决回调地狱问题的,仍然以上文的readFile 为例(先读取A文本内容,再根据A文本内容读取B再根据B的内容读取C)。

  1. function read(url) {

  2. return new Promise((resolve, reject) => {

  3. fs.readFile(url, 'utf8', (err, data) => {

  4. if(err) reject(err);

  5. resolve(data);

  6. });

  7. });

  8. }

  9. read(A).then(data => {

  10. return read(B);

  11. }).then(data => {

  12. return read(C);

  13. }).then(data => {

  14. return read(D);

  15. }).catch(reason => {

  16. console.log(reason);

  17. });

Promise 的优点:

  1. 一旦状态改变,就不会再变,任何时候都可以得到这个结果

  2. 可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数

缺点:

  1. 无法取消 Promise

  2. 当处于pending状态时,无法得知目前进展到哪一个阶段

  3. 错误不能被 trycatch

假设有这样一个需求:读取A,B,C三个文件内容,都读取成功后,再输出终的结果。在Promise之前,我们一般可以借助发布订阅模式去实现:

  1. let pubsub = {

  2. arry: [],

  3. emit() {

  4. this.arry.forEach(fn => fn());

  5. },

  6. on(fn) {

  7. this.arry.push(fn);

  8. }

  9. }


  10. let data = [];

  11. pubsub.on(() => {

  12. if(data.length === 3) {

  13. console.log(data);

  14. }

  15. });

  16. fs.readFile(A, 'utf-8', (err, value) => {

  17. data.push(value);

  18. pubsub.emit();

  19. });

  20. fs.readFile(B, 'utf-8', (err, value) => {

  21. data.push(value);

  22. pubsub.emit();

  23. });

  24. fs.readFile(C, 'utf-8', (err, value) => {

  25. data.push(value);

  26. pubsub.emit();

  27. });

Promise给我们提供了 Promise.all 的方法,对于这个需求,我们可以使用 Promise.all 来实现。

  1. /**

  2. * 将 fs.readFile 包装成promise接口

  3. */

  4. function read(url) {

  5. return new Promise((resolve, reject) => {

  6. fs.readFile(url, 'utf8', (err, data) => {

  7. if(err) reject(err);

  8. resolve(data);

  9. });

  10. });

  11. }


  12. /**

  13. * 使用 Promise

  14. *

  15. * 通过 Promise.all 可以实现多个异步并行执行,同一时刻获取终结果的问题

  16. */

  17. Promise.all([

  18. read(A),

  19. read(B),

  20. read(C)

  21. ]).then(data => {

  22. console.log(data);

  23. }).catch(err => console.log(err));

可执行代码可戳: https://github.com/YvetteLau/Blog/blob/master/JS/Async/index.js

3.Generator

Generator 函数是 ES6 提供的一种异步编程解决方案,整个 Generator 函数就是一个封装的异步任务,或者说是异步任务的容器。异步操作需要暂停的地方,都用 yield 语句注明。

Generator 函数一般配合 yield 或 Promise 使用。Generator函数返回的是迭代器。对生成器和迭代器不了解的同学,请自行补习下基础。下面我们看一下 Generator 的简单使用:

  1. function* gen() {

  2. let a = yield 111;

  3. console.log(a);

  4. let b = yield 222;

  5. console.log(b);

  6. let c = yield 333;

  7. console.log(c);

  8. let d = yield 444;

  9. console.log(d);

  10. }

  11. let t = gen();

  12. //next方法可以带一个参数,该参数就会被当作上一个yield表达式的返回值

  13. t.next(1); //次调用next函数时,传递的参数

  14. t.next(2); //a输出2;

  15. t.next(3); //b输出3;

  16. t.next(4); //c输出4;

  17. t.next(5); //d输出5;

为了让大家更好的理解上面代码是如何执行的,我画了一张图,分别对应每一次的next方法调用:

仍然以上文的 readFile (先读取A文本内容,再根据A文本内容读取B再根据B的内容读取C)为例,使用 Generator + co库来实现:

  1. const fs = require('fs');

  2. const co = require('co');

  3. const bluebird = require('bluebird');

  4. const readFile = bluebird.promisify(fs.readFile);


  5. function* read() {

  6. yield readFile(A, 'utf-8');

  7. yield readFile(B, 'utf-8');

  8. yield readFile(C, 'utf-8');

  9. //....

  10. }

  11. co(read()).then(data => {

  12. //code

  13. }).catch(err => {

  14. //code

  15. });

Generator的缺点大约不用我说了,除非是找虐,不然一般不会直接使用 Generator 来解决异步的(当然也不排除是因为我不熟练)~~~

不使用co库,如何实现?能否自己写一个简的 my_co,有助于理解 async/await 的实现原理 ?请戳: https://github.com/YvetteLau/Blog/blob/master/JS/Async/generator.js

PS: 如果你还不太了解 Generator/yield,建议阅读ES6相关文档。

4.async/await

ES7中引入了 async/await 概念。async 其实是一个语法糖,它的实现就是将 Generator函数和自动执行器(co),包装在一个函数中。

async/await 的优点是代码清晰,不用像 Promise 写很多 then 链,就可以处理回调地狱的问题。并且错误可以被try catch。

仍然以上文的readFile (先读取A文本内容,再根据A文本内容读取B再根据B的内容读取C) 为例,使用 async/await 来实现:

  1. const fs = require('fs');

  2. const bluebird = require('bluebird');

  3. const readFile = bluebird.promisify(fs.readFile);



  4. async function read() {

  5. await readFile(A, 'utf-8');

  6. await readFile(B, 'utf-8');

  7. await readFile(C, 'utf-8');

  8. //code

  9. }


  10. read().then((data) => {

  11. //code

  12. }).catch(err => {

  13. //code

  14. });

使用 async/await 实现此需求:读取A,B,C三个文件内容,都读取成功后,再输出终的结果。

  1. function read(url) {

  2. return new Promise((resolve, reject) => {

  3. fs.readFile(url, 'utf8', (err, data) => {

  4. if(err) reject(err);

  5. resolve(data);

  6. });

  7. });

  8. }


  9. async function readAsync() {

  10. let data = await Promise.all([

  11. read(A),

  12. read(B),

  13. read(C)

  14. ]);

  15. return data;

  16. }


  17. readAsync().then(data => {

  18. console.log(data);

  19. });

所以JS的异步发展史,可以认为是从 callback -> promise -> generator -> async/await。async/await 使得异步代码看起来像同步代码,异步编程发展的目标就是让异步逻辑的代码看起来像同步一样。

因本人水平有限,文中内容未必百分百正确,如有不对的地方,请给我留言,谢谢。

邀请你加入 Step-By-Step 项目

不积跬步无以至千里。 我是公众号【前端宇宙】作者刘小夕,我将和大家一起一步一个脚印,向前端专家迈进。Step-By-Step

每个工作日我会发布一个前端相关的问题(目的是为了切实掌握相关的知识点),欢迎在 Issue 区留下你的答案。

节假日不会发布任何问题,希望大家能够利用节假日回顾一周所学。每周末我会进行一次汇总(整理出优答案),以便大家回顾。

参考文章:

[1] 细说JavaScript异步函数发展历程

[2] ES6 Promise

[3] ES6 Generator

[4] ES6 async

[5] JavaScript异步编程

谢谢各位小伙伴愿意花费宝贵的时间阅读本文,如果本文给了您一点帮助或者是启发,请不要吝啬你的赞和Star,您的肯定是我前进的大动力。https://github.com/YvetteLau/Blog

关注小姐姐的公众号,加入交流群。


分享好友

分享这个小栈给你的朋友们,一起进步吧。

前端进阶之路
创建时间:2020-05-21 10:18:21
一位会拍照的程序媛来分享前端进阶之路
展开
订阅须知

• 所有用户可根据关注领域订阅专区或所有专区

• 付费订阅:虚拟交易,一经交易不退款;若特殊情况,可3日内客服咨询

• 专区发布评论属默认订阅所评论专区(除付费小栈外)

栈主、嘉宾

查看更多
  • 刘小夕
    栈主

小栈成员

查看更多
  • 小雨滴
  • ?
  • 栈栈
  • 叶子,你好
戳我,来吐槽~