JavaScript:理解Promise方法

Posted 2020-10-26 微宇宙

 什么是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 +２），因此第二个function的参数获得的结果为３。（切记：如果是链式调用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/