什么是promise?
Promise的核心思想是代表异步操作的一个结果,并且promise具有三个状态(pending初始状态,fulfilled成功状态,rejected失败状态)。我们可以理解为使用promise可以实现非阻塞io的功能,根据三个不同的状态,我们可以知道回调函数实现在哪个过程。
Promise.prototype.then
源码分析:
1 this.then = function(onFulfilled) { 2 if (typeof onFulfilled !== "function") return this; 3 return new Promise(function(resolve, reject) { 4 asap(function() { 5 try { 6 resolve(onFulfilled(value)); 7 } catch (ex) { 8 reject(ex); 9 } 10 }); 11 }); 12 }; 13 14 this.then = function(onFulfilled, onRejected) { 15 return new self.constructor(function(resolve, reject) { 16 handle(new Handler(onFulfilled, onRejected, resolve, reject)); 17 }); 18 }; 19 20 ValuePromise.prototype = Promise.prototype;
我们知道.then先是以对象的属性实现的方法,随后是以继承的方式实现的方法,所以then方法可以具有一个参数.then(onFulfilled),又可具有二个参数.then(onFulfilled,onRejected),第一个参数为操作成功的回调函数,并且第二个参数是操作失败的回调函数,然后从上面的handle方法可以看出then的二个参数以数组对象的形式保存在一个队列(deferreds)里面,然后从队列里面处理then方法。
.then链式调用
例子(略由于非链式每次都是promise迭代而已):
1 // 新建一个返回promise对象的函数 2 var p1 = function constructorpromise (a) { 3 return new Promise(function(resolve, reject) { 4 resolve(1) 5 }); 6 } 7 8 // 实现链式调用 9 var con = constructorpromise(2) 10 con 11 .then(function(a) { 12 var first = document.getElementsByClassName(‘part-second‘)[0] 13 first.innerText = a 14 return a + 2 15 }) 16 .then(function(b) { 17 var first = document.getElementsByClassName(‘part-first‘)[0] 18 first.innerText = b 19 })
注意以上有二个then方法实现的回调,第一个then方法function调用传参是从promise中resolve回调传入的参数值1,第二个then方法的function调用传参是上一个then方法function内部return传递下来的值3(return a +2),因此第二个function的参数获得的结果为3。(切记:如果是链式调用then,那么从第二个then开始function的参数都是从上一个then的function返回的结果,如果上一个then没有return,那么下一个then的function参数为undefined)
Promise.all()
源码分析:
1 Promise.all = function(arr) { 2 var args = Array.prototype.slice.call(arr); 3 return new Promise(function(resolve, reject) { 4 if (args.length === 0) return resolve([]); 5 var remaining = args.length; 6 function res(i, val) { 7 try { 8 if (val && (typeof val === "object" || typeof val === "function")) { 9 var then = val.then; 10 if (typeof then === "function") { 11 then.call(val, function(val) { 12 res(i, val); 13 }, reject); 14 return; 15 } 16 } 17 args[i] = val; 18 if (--remaining === 0) { 19 resolve(args); 20 } 21 } catch (ex) { 22 reject(ex); 23 } 24 } 25 for (var i = 0; i < args.length; i++) { 26 res(i, args[i]); 27 } 28 }); 29 };
从以上可以看出,当all的方法内参数为空时(args.length === 0),就会返回一个resolve方法的迭代对象。如果不为空,且all方法的数组上也不是promise时,那么就会输出值args[i] = val;也就是s说返回初始值pending。如果all方法的数组项是promise时,就会回调resolve()并返回每一项的结果。
例子:
1 var promise = Promise.resolve(3); 2 Promise.all([true, promise]).then(values => { 3 console.log(values); // [true, 3] 4 });
Promise.race([])
源码分析:
1 Promise.race = function(values) { 2 return new Promise(function(resolve, reject) { 3 values.forEach(function(value) { 4 Promise.resolve(value).then(resolve, reject); 5 }); 6 }); 7 };
其实.race方法内部的数组每一项如果都用promise的resolve方法实现的迭代,那么数组内每一项promise的状态都会发送改变,就像race英文的意思"赛跑,竞争",表示promise哪一项先执行resolve回调,哪一项promise就会先执行回调函数并返回resolve结果。
例子:
1 var p1 = new Promise(function(resolve, reject) { 2 setTimeout(resolve, 500, "one"); 3 }); 4 var p2 = new Promise(function(resolve, reject) { 5 setTimeout(resolve, 100, "two"); 6 }); 7 8 Promise.race([p1, p2]).then(function(value) { 9 console.log(value); // "two" 10 // Both resolve, but p2 is faster 11 });
参考:
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/all
https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise#参见
https://segmentfault.com/a/1190000007032448#articleHeader10
https://www.promisejs.org/api/