众所周知的,Javascript是一种单线程的语言,所有的代码必须按照所谓的“自上而下”的顺序来执行。本特性带来的问题就是,一些将来的、未知的操作,必须异步实现,本文将讨论一个比较常见的异步解决方案——Promise,时至本文最后更新的日子,Promise的应用已经极其广泛。
promise解决的问题
当一个异步执行的任务需要依赖另一个异步执行任务的结果时,我们一般都会将两个异步任务嵌套起来,但是当多个这样的异步任务嵌套之后,代码就会变为以下这样:
async1(function(){
async2(function(){
async3(function(
async4(funciton(){
async5(function(){
//.....
});
});
));
});
});
代码层层嵌套,环环相扣,形成所谓的回调监狱,很不利于代码的后期维护。Promise的出现,则很好的解决的这类问题。
ES6Promise的用法
promise本身是一个构造函数,身上有resolve,reject,all,race等方法,原型上还有then,catch方法。
new一个promise:
function test(
var p=new Promise(function(resolve,reject){
setTimeout(function(){
console.log('执行完成');
resolve('测试数据');
},2000);
});
return p;
)
test();
Promise的构造函数接受一个参数,函数类型,并且传入两个参数:resolve,reject,分别表示异步操作成功后的回调函数和异步操作失败后的回调函数,严格来说,resolve是将Promise对象状态置为fullfiled,而reject则将其状态置为rejected.
此时test函数的运行结果是,在2秒后输出:"执行完成"。
那么可能大家疑惑resolve()有个毛作用?
1.resolve,then方法详解
当我们执行上一个test方法时,会返回一个Promise对象,还记得刚开始说的原型上还有一个then方法吗?
test().then(function(data){
console.log(data);
})
在test()的返回上直接调用then()方法,then接受了一个参数,函数类型,参数是test中resolve()中传出来的参数,运行这段代码,会在2秒后先输出“执行完成”,再输出"测试数据"。
其实then方法和我们平时的回调函数是一个意思。简单地说,就是能把原来的回调写法分离出来,在异步操作执行完后,用链式调用的方式执行回调函数。
链式操作的用法:
所以,从表面上看,Promise只是能够简化层层回调的写法,而实质上,Promise的精髓是“状态”,用维护状态、传递状态的方式来使得回调函数能够及时调用,它比传递callback函数要简单、灵活的多。所以使用Promise的正确场景是这样的:
test()
.then(function(data){
console.log(data);
return test2();
})
.then(function(data){
console.log(data);
return test3();
})
.then(function(data){
console.log(data);
});
这样能够按顺序,每隔两秒输出每个异步回调中的内容,在runAsync2中传给resolve的数据,能在接下来的then方法中拿到。运行结果如下:
异步任务1执行完成
测试数据1
异步任务2执行完成
测试数据2
异步任务3执行完成
测试数据3
其中函数的定义如下:
function test1(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务1执行完成');
resolve('测试数据1');
}, 1000);
});
return p;
}
function test2(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务2执行完成');
resolve('测试数据2');
}, 2000);
});
return p;
}
function test3(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
console.log('异步任务3执行完成');
resolve('测试数据3');
}, 2000);
});
return p;
}
在then方法中,你也可以直接return数据而不是Promise对象,在后面的then中就可以接收到数据了。
2.reject,catch方法详解
我们光用了resolve,还没用reject呢,它是做什么的呢?事实上,我们前面的例子都是只有“执行成功”的回调,还没有“失败”的情况,reject的作用就是把Promise的状态置为rejected,这样我们在catch中就能捕捉到,然后执行“失败”情况的回调。
function getNumber(){
var p = new Promise(function(resolve, reject){
//做一些异步操作
setTimeout(function(){
var num = Math.ceil(Math.random()*10); //生成1-10的随机数
if(num<=5){
resolve(num);
}
else{
reject('数字太大了');
}
}, 2000);
});
return p;
}
getNumber()
.then(function(data){
console.log('resolved');
console.log(data);
})
.catch(function(reason){
console.log('rejected');
console.log(reason);
});
在执行resolve的回调(也就是上面then中的第一个参数)时,如果抛出异常了(代码出错了),那么并不会报错卡死js,而是会进到这个catch方法中.
All的用法
promise提供了并行执行异步操作的能力,并且是所有异步操作执行完之后才进行回调。
比如说:
Promise
.all([test1(), test2(), test3()])
.then(function(results){
console.log(results);
});
用Promise.all来执行,all接收一个数组参数,里面的值最终都算返回Promise对象。这样,三个异步操作的并行执行的,等到它们都执行完后才会进到then里面。那么,三个异步操作返回的数据哪里去了呢?都在then里面呢,all会把所有异步操作的结果放进一个数组中传给then,就是上面的results。所以上面代码的输出结果就是:
异步任务1执行完成
异步任务2执行完成
异步任务3执行完成
["测试数据1","测试数据2","测试数据3"]
有了all,你就可以并行执行多个异步操作,并且在一个回调中处理所有的返回数据,是不是很酷?有一个场景是很适合用这个的,一些游戏类的素材比较多的应用,打开网页时,预先加载需要用到的各种资源如图片、flash以及各种静态文件。所有的都加载完后,我们再进行页面的初始化。
race的用法
all方法的效果实际上是「谁跑的慢,以谁为准执行回调」,那么相对的就有另一个方法「谁跑的快,以谁为准执行回调」,这就是race方法,这个词本来就是赛跑的意思。race的用法与all一样,我们把上面test1的延时改为1秒来看一下:
Promise
.race([test1(), test2(), test3()])
.then(function(results){
console.log(results);
});
这三个异步操作同样是并行执行的。结果你应该可以猜到,1秒后test1已经执行完了,此时then里面的就执行了。结果是这样的:
异步任务1执行完成
测试数据1
异步任务2执行完成
异步任务3执行完成
是吧。在then里面的回调开始执行时,test2()和test3()并没有停止,仍旧再执行。于是再过1秒后,输出了他们结束的标志。