频道栏目
首页 > 程序开发 > Web开发 > Python > 正文
怎么理解JavaScript中的promise?
2018-04-16 16:02:40      个评论    来源:微宇宙  
收藏   我要投稿

  什么是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 second = document.getElementsByClassName('part-second')[0]
13   second.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方法调用传参是从promise中resolve回调传入的参数值1,第二个then方法调用传参是上一个then方法内部return传递下来的值3(return a +2),因此第二个then参数获得的结果为3。(切记:如果是链式调用then,那么从第二个then开始的参数都是从上一个then的返回的结果,如果上一个then没有return,那么下一个then的参数为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;也就是说返回初始值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 });

						
点击复制链接 与好友分享!回本站首页
相关TAG标签 promise 源码 状态
上一篇:python的深拷贝与浅拷贝实例讲解
下一篇:学PYTHON时最容易犯的6个错误
相关文章
图文推荐

关于我们 | 联系我们 | 广告服务 | 投资合作 | 版权申明 | 在线帮助 | 网站地图 | 作品发布 | Vip技术培训 | 举报中心

版权所有: 红黑联盟--致力于做实用的IT技术学习网站