Javascript中的异步编程
栏目: JavaScript · 发布时间: 5年前
内容简介:最近,小伙伴S 问了我一段代码:他不太理解这段代码中,funB 函数作为 funA 函数的参数这样的写法。从语义上看,callback 的意思是回调,那么是说 funB 是 funA 的回调嘛?
前言
最近,小伙伴S 问了我一段代码:
const funB = (value) => { console.log("funB "+ value); }; const funA = (callback) => { ... setTimeout(() => { typeof callback === "function" && callback("is_ok!"); }, 1000); } funA(funB);
他不太理解这段代码中,funB 函数作为 funA 函数的参数这样的写法。从语义上看,callback 的意思是回调,那么是说 funB 是 funA 的回调嘛?
我给他解释说,funB 函数的确是 funA 函数的回调,它会等待 funA 中前面的语句都执行完,再去执行。这是一种异步编程的写法。
小伙伴S 还是有点不太理解。他问:异步编程是什么?除了回调函数之外,异步编程还有哪些?
别急,让我们先从概念入手,再逐个理解异步编程中的方法,看看它的前世今生。
什么是异步?
所谓"异步"(Asynchronous),可以理解为一种不连续的执行。简单地说,就是把一个任务分成两段,先执行第一段,然后转而执行其他任务,等接到通知了,再回过头执行第二段。
我们都知道,JavaScript是单线程的。而异步,对于JavaScript的重要性,则体现在非阻塞这一点上。一些常见的异步有:
onclick setTimeout ajax
接下来,我们一起来看看Javascript中的异步编程,具体有哪几种。
实现异步编程的方法
一、回调函数
上面不止一次提到了回调函数。它从概念上说很简单,就是 把任务的第二段单独写在一个函数里面,等到重新执行这个任务的时候,就直接调用这个函数 。它是异步编程中,最基本的方法。
举个例子,假定有两个函数 f1 和 f2,后者等待前者的执行结果。顺序执行的话,可以这样写:
f1(); f2();
但是,如果 f1 是一个很耗时的任务,该怎么办?
改写一下 f1,把 f2 写成 f1 的回调函数:
const f1 = (callback) => { setTimeout(() => { typeof callback === "function" && callback(); }, 1000); } f1(f2);
二、事件监听
onclick 的写法,在异步编程中,称为事件监听。它的思路是:如果任务的执行不取决于代码的顺序,而取决于某个事件是否发生,也就事件驱动模式。
还是 f1 和 f2 的例子,为了简化代码,这里采用jQuery的写法:
// 为f1绑定一个事件,当f1发生done事件,就执行f2 f1.on('done', f2); // 改写f1 function f1(){ setTimeout(() => { // f1的任务代码,执行完成后,立即触发done事件 f1.trigger('done'); }, 1000); }
它的优点是:比较容易理解,耦合度降低了。可以绑定多个事件,而且每个事件还能指定多个回调函数。
缺点是:整个程序都会变为由事件来驱动,流程会变得很不清晰。
三、发布/订阅
这是一种为了处理一对多的业务场景而诞生的设计模式,它也是一种异步编程的方法。vue中MVVM的实现,就有它的功劳。
关于概念,我们可以这样理解,假定存在一个"信号中心",某个任务执行完成,就向信号中心"发布"(publish)一个信号,其他任务可以向信号中心"订阅"(subscribe)这个信号,从而知道什么时候自己可以开始执行。这就叫做"发布/订阅模式"(publish-subscribe pattern),又称"观察者模式"(observer pattern)。
下面的例子,采用的是 Morgan Roderick 的 PubSubJS ,这是一个无依赖的JavaScript插件:
import PubSub from 'pubsub-js'; // f2向 'PubSub' 订阅信号 'done' PubSub.subscribe('done', f2); const f1 = () => { setTimeout(() => { // f1执行完成后,向 'PubSub' 发布信号 'done',从而执行 f2 PubSub.publish('done'); }, 1000); }; f1(); // f2 完成执行后,也可以取消订阅 PubSub.unsubscribe("done", f2);
这种模式有点类似于“事件监听”,但是明显优于后者。因为,我们可以通过查看“消息中心”,了解存在多少信号、每个信号有多少订阅者,从而监控程序的运行。
四、Promise对象
接下来,我们聊聊与ajax相关的异步编程方法,Promise对象。
Promise 是由 CommonJS 提出的一种规范,它是为了解决回调函数嵌套,也就是回调地狱的问题。它不是新的语法功能,而是一种新的写法,允许将回调函数的横向加载,改成纵向加载。它的思想是,每一个异步任务返回一个Promise对象,该对象有一个then方法,允许指定回调函数。
继续改写 f1 和 f2:
const f1 = () => { return new Promise((resolve, reject) => { let timeOut = Math.random() * 2; setTimeout(() => { if (timeOut < 1) { resolve('200 OK'); } else { reject('timeout in ' + timeOut + ' seconds.'); } }, 1000); }); }; const f2 = () => { console.log('start f2'); }; f1().then((result) => { console.log(result); f2(); }).catch((reason) => { ... );
例子中,用随机数模拟了请求的超时。当 f1 返回 Promise 的 resolve 时,执行 f2。
Promise的优点是:回调函数变成了链式的写法,程序的流程可以看得很清楚。还有就是,如果一个任务已经完成,再添加回调函数,该回调函数会立即执行。所以,你不用担心是否错过了某个状态。
缺点就是:编写和理解,都相对比较难。
五、Generator
generator(生成器)是 ES6 标准引入的数据类型。它最大特点,就是可以交出函数的执行权(即暂停执行),是协程在 ES6 中的实现。
看上去它像一个函数,定义如下:
function* gen(x) { var y = yield x + 2; return y; }
它不同于普通函数,函数名之前要加星号( *
),是可以暂停执行的。
整个 Generator 函数就是一个封装的异步任务,或者说是异步任务的容器。用 yield 语句注明异步操作需要暂停的地方。
我们来看一下 Generator 函数执行的过程:
var g = gen(1); // { value: 3, done: false } g.next(); // { value: undefined, done: true } g.next();
上面代码中,调用 Generator 函数,会返回一个内部指针(即遍历器 )g 。这是 Generator 函数不同于普通函数的另一个地方,即执行它不会返回结果,返回的是指针对象。调用指针 g 的 next 方法,会移动内部指针(即执行异步任务的第一段),指向第一个遇到的 yield 语句,上例是执行到 x + 2 为止。
换言之,next 方法的作用是分阶段执行 Generator 函数。每次调用 next 方法,会返回一个对象,表示当前阶段的信息( value 属性和 done 属性)。value 属性是 yield 语句后面表达式的值,表示当前阶段的值;done 属性是一个布尔值,表示 Generator 函数是否执行完毕,即是否还有下一个阶段。
六、async/await
这是 ES8 中提出的一种更优雅的异步解决方案,灵感来自于 C# 语言。具体可前往 细说 async/await 相较于 Promise 的优势 ,深入理解其原理及特性。
来看个例子,要实现一个暂停功能,输入 N 毫秒,则停顿 N 毫秒后才继续往下执行。
const sleep = (time) => { return new Promise((resolve, reject) => { setTimeout(() => { resolve(); }, time); }) }; const start = async () => { console.log('start'); // 在这里使用起来就像同步代码那样直观 await sleep(1000); console.log('end'); }; start();
控制台先输出 start,稍等 1 秒后,输出结果 ok,最后输出 end。
解析一下上述代码:
- async 表示这是一个async函数,await 只能用在这个函数里面。
- await 表示在这里等待 promise 返回了结果,再继续执行。
- 使用起来,就像写同步代码一样地优雅。
总结
JavaScript的异步编写方式,从 回调函数 到 async/await,感觉在写法上,每次都有进步,其本质就是一次次对语言层抽象的优化。以至于现在,我们可以像同步一样地,去处理异步。
换句话说就是: 异步编程的最高境界,就是根本不用关心它是不是异步 。
PS:欢迎关注我的公众号 “超哥前端小栈”,交流更多的想法与技术。
以上就是本文的全部内容,希望本文的内容对大家的学习或者工作能带来一定的帮助,也希望大家多多支持 码农网
猜你喜欢:本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。
JavaScript: The Definitive Guide, 5th Edition
David Flanagan / O'Reilly Media / 2006-08-01 / USD 49.99
This Fifth Edition is completely revised and expanded to cover JavaScript as it is used in today's Web 2.0 applications. This book is both an example-driven programmer's guide and a keep-on-your-desk ......一起来看看 《JavaScript: The Definitive Guide, 5th Edition》 这本书的介绍吧!