在JS开发中,异步函数是一个绕不过去的坎,要想写出优雅适用的js代码,把异步函数的使用技巧掌握透是必须的。
在es5版本中,异步函数的使用受原生API支持较少影响,好用的方法不多,笨办法可以写出个回调嵌套,在回调嵌套1 2层还好,多了就变成回调地狱了,那种代码的恶心程度,真是不忍直视,比如:
1//Nodejs 代码
2connection.query(sql, (err, result) => {
3 if(err) {
4 console.err(err)
5 } else {
6 connection.query(sql, (err, result) => {
7 if(err) {
8 console.err(err)
9 } else {
10 ...
11 }
12 })
13 }
14})
这种代码既难看,又难维护,过段时间如果业务逻辑稍有变动,改动起来就是真恶心了。并且它对异常的捕获也无法支持,找个bug实在令人烦躁。
怎么办?在没有提供原生支持的情况下,只能借助设计模式在尽量写出优雅的js代码,常用的比如发布订阅模式。这就是我非常喜欢用的一种设计模式。
下面给出我常用的发布订阅模式的对象封装:
1/**
2 * 发布订阅对象
3 * @param {*} obj //需要装载发布订阅功能的初始对象
4 */
5var observer = function(obj){
6
7 //定义发布订阅对象
8 var ObserverEvent = (function(){
9 var cacheList = {}, //缓存列表,存放订阅者的回调函数
10 listen, //添加订阅方法
11 trigger, //发布消息
12 remove; //取消订阅方法
13
14 listen = function(key, fn){
15 if(!cacheList[key]){ //如果还没有订阅过此类消息,给该类消息创建一个缓存列表
16 cacheList[key] = []
17 }
18
19 cacheList[key].push(fn) //订阅的消息添加进消息缓存列表
20 }
21
22 trigger = function(){
23 var key = Array.prototype.shift.call(arguments), //取出消息类型
24 fns = cacheList[key]; //取出该消息对应的回调函数集合
25
26 if(!fns || fns.length==0){ //如果没有订阅该消息,则返回
27 return false;
28 }
29
30 for(var i=0; i<fns.length; i++){
31 fns[i].apply(this, arguments)
32 }
33 }
34
35 remove = function(key, fn){
36 var fns = cacheList[key]
37
38 if(!fns || fns.length==0){ //如果key对应的消息没有被订阅,则直接返回
39 return false;
40 }
41
42 if(!fn){
43 fns.length=0
44 }else {
45 for(var l=fns.length-1; l>=0; l--){
46 var _fn = fns[l]
47 if(_fn == fn){
48 fns.splice(l, 1)
49 }
50 }
51 }
52 }
53
54 return {
55 cacheList: cacheList,
56 listen: listen,
57 trigger: trigger,
58 remove: remove
59 }
60 })()
61
62 //定义发布对象安装函数,这个函数可以给所有的对象动态安装发布-订阅功能
63 var installEvent = function(obj){
64 for(var i in ObserverEvent){
65 obj[i] = ObserverEvent[i]
66 }
67 }
68
69 return installEvent(obj); //为该对象装载发布订阅功能
70}
直接向observer
函数中传递一个空白对象obj
即可(obj对象自定义自行命名),obj
对象通过for in
方法继承了发布订阅对象ObserverEvent
的属性与方法,这样在项目中的一个页面上都可以以这个obj
对象作为页面数据对象,进行事件的订阅与触发。尤其是如果页面ajax
使用较多且数据互相依赖时,使用发布订阅模式进行数据获取与DOM操作,非常舒服。
除了善用设计模式提高代码优雅程度外,es6原生提供的Promise对象也为异步函数回调提供的比较优雅的解决方案。它把原来的嵌套回调变成了级联调用,很好的解决回调地狱的问题。
以下关于Promise对象的解释内容引用自《ES6标准入门》,感谢大神阮一峰的布道。
ES6 规定,
Promise
对象是一个构造函数,用来生成Promise
实例。
1const promise = new Promise(function(resolve, reject) {
2 // ... some code
3
4 if (/* 异步操作成功 */){
5 resolve(value);
6 } else {
7 reject(error);
8 }
9});
Promise
构造函数接受一个函数作为参数,该函数的两个参数分别是resolve
和reject
。它们是两个函数,由 JavaScript 引擎提供,不用自己部署。resolve
函数的作用是,将Promise
对象的状态从“未完成”变为“成功”(即从 pending 变为 resolved),在异步操作成功时调用,并将异步操作的结果,作为参数传递出去;reject
函数的作用是,将Promise
对象的状态从“未完成”变为“失败”(即从 pending 变为 rejected),在异步操作失败时调用,并将异步操作报出的错误,作为参数传递出去。Promise
实例生成以后,可以用then
方法分别指定resolved状态和rejected状态的回调函数。
1promise.then(function(value) {
2 //resolved状态回调函数
3 // success
4}, function(error) {
5 //rejected状态的回调函数
6 // failure
7});
Promise
新建后会立即执行,所以首先输出的是Promise,然后是同步任务执行的结果,然后才是异步回调函数的结果。
1var timeout = function(ms){
2 return new Promise(function(resolve, reject){
3 console.log(2355);
4 setTimeout(resolve, ms, 'done')
5 })
6}
7
8timeout(2000).then(function(data){
9 console.log(data);
10})
11
12console.log('Hi)
13
14//立即打印
152355
16'Hi'
17//2秒后打印
18'done'
19
这里想到个知识点补充下,在浏览器中js同步和异步的执行顺序问题,在浏览器执行栈中,优先执行同步任务,当同步任务全部执行完毕时,才会读取由异步任务组成的队列中的异步任务。这些异步任务还分成宏任务和微任务。
其中同步任务是指console.log()
打印一条日志、声明一个变量或执行一次加减法操作、调用一个普通函数等等。异步任务的常见操作有Ajax
、DOM的事件操作
、setTimeout
、Promise
的then方法、Node的文件读取IO操作等。
理解同步异步执行顺序的最好方法还是看图:
前面说过,异步任务分为宏任务和微任务。
宏任务主要有:
script
全局任务、setTimeout
、setInterval
、setImmediate
、I/O
、UI rendering
微任务主要有:
process.nextTick
、Promise.then()
、Object.observe
在微任务中 process.nextTick 优先级高于Promise。
当一个异步任务入栈时,主线程判断该任务为异步任务,并把该任务交给异步处理模块处理,当异步处理模块处理完打到触发条件时,根据任务的类型,将回调函数压入任务队列。
所以上图的任务队列可以继续细化一下:
面来理下事件执行机制:
当异步任务进入栈执行时:
1setTimeout(function(){
2 console.log(1);
3 Promise.resolve().then(function(){
4 console.log(2);
5 })
6}, 0)
7setTimeout(function(){
8 console.log(3);
9}, 3)
10Promise.resolve().then(function(){
11 console.log(4);
12})
13console.log(5);
14
15// 5 4 1 2 3
上述行文与代码的结论简单表述是,在js加载时,在加载js脚本script
文件后,先执行同步任务,当同步任务都执行完毕后,再执行异步任务中的微任务,当微任务都执行完毕后,再执行异步任务中的宏任务。如遇异步任务中包含同步任务或异步任务时,也要记住同步=>异步微任务=>异步宏任务的执行优先级。
下面来看个Promise封装的ajax请求示例
1var getJson = function(url){
2var promise = new Promise(function(resolve, reject){
3 var handle = function(){
4 if(this.readyState !== 4){
5 return ;
6 }
7 if(this.status === 200){
8 resolve(this.resoponse)
9 }else {
10 reject(new Error(this.statusText));
11 }
12 };
13 var client = new XMLHttpRequest();
14 client.open('get', url);
15 client.onreadystatechange = handle;
16 client.responseType = 'json';
17 client.setRequestHeader('Accept', 'application/json');
18 client.send();
19})
20
21return promise;
22}
23getJson(orderUrlBase + '/rollBaseOrder/oustStockInfo?wareIds' + wareIds).then(function(data){
24console.log(data);
25}, function(){
26console.log(error);
27})
上面代码中,getJSON是对 XMLHttpRequest 对象的封装,用于发出一个针对 JSON 数据的 HTTP 请求,并且返回一个Promise对象。需要注意的是,在getJSON内部,resolve函数和reject函数调用时,都带有参数。
如果调用resolve函数和reject函数时带有参数,那么它们的参数会被传递给回调函数。reject函数的参数通常是Error对象的实例,表示抛出的错误;resolve函数的参数除了正常的值以外,还可能是另一个 Promise 实例。
下面代码中,调用resolve(10)以后,后面的console.log(2)还是会执行,并且会首先打印出来。这是因为立即 resolved 的 Promise 是在本轮事件循环的末尾执行,总是晚于本轮循环的同步任务。
1new Promise(function(resolve, reject){
2 resolve(10)
3 console.log(2);
4})
5.then(function(data){
6 console.log(data);
7}, function(err){
8 console.log(err);
9})
10
11//2
12//10
一般来说,调用resolve或reject以后,Promise 的使命就完成了,后继操作应该放到then方法里面,而不应该直接写在resolve或reject的后面。所以,最好在它们前面加上return语句,这样就不会有意外。
1new Promise(function(resolve, reject){
2 return resolve(10)
3 console.log(2);
4})
5.then(function(data){
6 console.log(data);
7}, function(err){
8 console.log(err);
9})
10//10
Promise实例具有then()方法,也就是说then()方法是定义在原型对象Promise.prototype
上的,then
方法的第一个参数是resolved
状态的回调函数,第二个参数(可选)是rejected
状态的回调函数。
另外需要注意的是,then
方法返回的是一个新的Promise实例,所以可以使用链式写法,即在then
方法后面再调另一个then
方法。
1getJSON("/post/1.json").then(function(post) {
2 return getJSON(post.commentURL);
3}).then(function funcA(comments) {
4 console.log("resolved: ", comments);
5}, function funcB(err){
6 console.log("rejected: ", err);
7});
这里请注意,上段代码中的第一个then
方法指定的回调函数,返回的是一个Promise对象。第二个then
方法指定的回调函数,就会等待这个新的Promise对象状态发生变化。如果变为resolvee,就调用funcA,如果状态变为rejected,就调用funcB。
Promise.prototype.catch()方法是then(null, rejection)的别名,用于指定发生错误时的回调函数。
1getJSON('/posts.json').then(function(posts) {
2 // ...
3}).catch(function(error) {
4 // 处理 getJSON 和 前一个回调函数运行时发生的错误
5 console.log('发生错误!', error);
6});
上面代码中,getJSON方法返回一个 Promise 对象,如果该对象状态变为resolved,则会调用then方法指定的回调函数;如果异步操作抛出错误,状态就会变为rejected,就会调用catch方法指定的回调函数,处理这个错误。另外,then方法指定的回调函数,如果运行中抛出错误,也会被catch方法捕获。
1var promise = new Promise(function(resolve, reject){
2 // throw new Error('error')
3 // resolve(10)
4 reject(new Error('can not do it.'))
5})
6promise.then(function(data){
7 console.log(data);
8}, function(err){
9 console.log(err);
10})
11.catch(function(err){
12 console.log(err);
13})
14
15//Error: test
这里需要注意下,如果promise状态已经变成resolved,再抛出错误就是没用的。
上面代码中,Promise 在resolve语句后面,再抛出错误,不会被捕获,等于没有抛出。因为 Promise 的状态一旦改变,就永久保持该状态,不会再变了。
Promise 对象的错误具有“冒泡”性质,会一直向后传递,直到被捕获为止。也就是说,错误总是会被下一个catch语句捕获。
1getJSON('/post/1.json').then(function(post) {
2 return getJSON(post.commentURL);
3}).then(function(comments) {
4 // some code
5}).catch(function(error) {
6 // 处理前面三个Promise产生的错误
7});
上面代码中,一共有三个 Promise 对象:一个由getJSON产生,两个由then产生。它们之中任何一个抛出的错误,都会被最后一个catch捕获。
对于promise对象的错误捕获,通常最佳实践是不在then()方法里设置reject状态的回调函数(即then方法的第二个参数,其可选),而是使用catch方法捕获。
1// bad
2promise
3 .then(function(data) {
4 // success
5 }, function(err) {
6 // error
7 });
8
9// good
10promise
11 .then(function(data) { //cb
12 // success
13 })
14 .catch(function(err) {
15 // error
16 });
至于这么写的理由,其实就是第二种写法可以捕获前面then方法中的错误,而如果没有使用catch方法,Promise对象抛出的错误不会传递到外层代码中,即对错误异常不会有任何反应,这会导致无法debug调试。
所以一般总是建议,Promise 对象后面要跟catch方法,这样可以处理 Promise 内部发生的错误。catch方法返回的还是一个 Promise 对象,因此后面还可以接着调用then方法。