javascript技巧

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript技巧 > es6 promise

深入解析ES6中的promise

作者:Wayne Zhu

ES6中的promise对象很早就听说过,据说是为了解决我们使用回调产生回调地狱的问题。今天小编就带领大家通过本文学习下es6中的promise,感兴趣的朋友跟随小编一起看看吧

ES6中的promise对象很早就听说过,据说是为了解决我们使用回调产生回调地狱的问题。今天下午既然有这么想学的欲望,就来看一看吧,当然参考的还是阮一峰老师的教程。

第一部分:什么是Promise

  看本文的最后一个例子,迅速理解。

  Promise是ES6中的一个内置的对象(实际上是一个构造函数,通过这个构造函数我们可以创建一个Promise对象),它是为了解决异步问题的。Promise的英文意思是承诺。

  Promise的特点如下:

•Promise有三种状态:Pending(进行中)、Resolved(已完成)、Rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。这就是Promise。

•Promise一共有三种状态,但是他们之间是如何转化的呢? 其一: 从Pending(进行中)到Resolved(完成)。其二: 从Pending(进行中)到Rejected(已失败)。 且只有这两种形式的转变,即使是Promise对象的结果也无力回天了。

  但是Promise也是有一定的缺点的,如在Pengding时,我们无法取消状态,另外,我们没法判断Pending究竟是刚刚开始的Pending还是即将要完成的Pending。

第二部分:使用Promise

前言: 

 在下面例子的讲解中,我们需要使用到setTimeout函数,这里首先说明setTimeout的一些重要用法。一般我们常用的如下所示:

    setTimeout(func(){}, 1000);

  即在1000ms之后执行func函数,但是其实setTimeout还可以传入更多的参数。这篇博客做了讲解,而这里为了了解下面的例子我们只需要知道,在chrome中可以传入第三个、第四个参数....作为func()函数的参数传递进去,举例如下:      

setTimeout(function (a, b) {
   console.log(a + b);
  }, 1000, 20, 50);

  最终的输入结果是:70

  下面的代码创建了一个Promise实例:

var promise = new Promise(function(resolve, reject) {
 // ... some code

 if (/* 异步操作成功 */){
 resolve(value);
 } else {
 reject(error);
 }
});

  其中,由于Promise是构造函数,所以我们使用new来创建一个对象即可, 值得注意的是:function(resolve, reject){}这个函数是必须要写的,否则就不是Promise了。

  这个函数是为了初始化Promise对象,其中这个函数接受了两个函数作为参数, 如果在函数体中我们执行了resolve函数,那么Promise的状态就会由pending转化为resolved(或fullfilled,两者是相同的),类似的,如果我们执行了reject函数,pending就会变成 rejected。  

  注意: 这个例子的if语句不是必要的,这里想要表达的意思是如果得到了异步成功的相关结果,我们就将调用resolve,将pending转化为resolved,并且将异步成功后的value值传递进去以便后面使用,说是以便后面使用是因为Promise还有一个then()方法,即可以定义在异步成功(或失败)之后需要做的事情。这也就是resolve和reject内置函数存在的意义了。

 当创建了这个Promise对象之后,就一定会有一个结果了,但是成功和失败还是不确定的,我们需要根据判断结果的成功和失败来做不同的事情,于是用到了then()方法,如下所示:

promise.then(function(value) {
 // success
}, function(error) {
 // failure
});

  下面是一个例子,并做了详尽的说明:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>testsettimeout</title>
</head>
<body>
 <script>
 var promise = new Promise(function (resolve, reject) {
  console.log("good");
  var a = 10;
  var b = a + 25;
  if ( b === 35 ) {
   // 一旦异步执行成功,我们就调用内置的 resolve函数,将pending状态转化为resolved,并且传入我们希望传出的执行成功后的结果。
   // 注意: 这里一旦状态转变,那么后面就一定会调用then方法中的第一个参数的函数,然后将我们传入给resolve的参数传给then方法中的第一个方法作为参数,我们就可以在then的第一个方法中使用了。
   resolve(b);
  } else {
   reject("异步执行失败");
  }
 });
 promise.then(function (value) {
  console.log("异步执行成功,输出执行结果:" + value);
 }, function (error) {
  console.log("异步执行失败,输出执行结果:" + error);
 });
 </script>
</body>
</html>


而阮一峰老师所列的下面的这个例子可以清楚的看出promise就是异步的:

 let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
 });

 promise.then(function() {
  console.log('Resolved.');
 });

 console.log('Hi!');

最终的输出结果是: Promise    Resolved    Hi

分析: 从这个例子中可以看出promise的异步,因为前面的两部分代码还没有执行,就已经输出了Hi。另外可以确定的是 Resolved 一定是在 Promise之后输出的,这个顺序是不可能有问题的。

下面的例子是一个异步添加图片的url的例子    

function loadImageAsync(url) {
   return new Promise(function(resolve, reject) {
    var image = new Image();
    image.onload = function () {
     resolve(image);
    };
    image.onerror = function() {
     reject(new Error('Could not load image at' + url));
    }
    image.src = url;
   });
  }

如果加载成功就使用resolve方法,如果失败就使用reject方法。

下面的例子是阮一峰老师封装的Ajax的例子,是在太好,没法不直接拿来参考~ 

var getJSON = function(url) {
 var promise = new Promise(function(resolve, reject){
 var client = new XMLHttpRequest();
 client.open("GET", url);
 client.onreadystatechange = handler;
 client.responseType = "json";
 client.setRequestHeader("Accept", "application/json");
 client.send();
 function handler() {
  if (this.readyState !== 4) {
  return;
  }
  if (this.status === 200) {
  resolve(this.response);
  } else {
  reject(new Error(this.statusText));
  }
 };
 });
 return promise;
};
getJSON("/posts.json").then(function(json) {
 console.log('Contents: ' + json);
}, function(error) {
 console.error('出错了', error);
});

  这里应该大家都可以看懂,值得注意的是:handler这个处理函数的使用在这里显得很巧妙。

第三部分: Promise.prototype.then()

  在上一部分,我们实际上已经介绍了then()方法,而这里需要强调的有两点。

  第一: then()方法是Promise原型上定义的方法。

  第二:then()方法支持链式调用,上一个then()方法调用后返回的结果会传给下一个then方法中。

第一:我们再chrome中输入 Promise.prototype可以看到下面的例子:

 可以看出在Promise的原型中确实是由then方法的。(注:比如我们想看Array这个内置对象有哪些方法,我们就可以直接在chrome中输入Array.prototype,然后就可以看到对应方法的列表了)

 第二: then()的作用是为Promise实例添加状态改变时的回调函数。前面说过,then方法的第一个参数是Resolved状态的回调函数,第二个参数(可选)是Rejected状态的回调函数。

    then()由于支持链式调用,所以也可以写成下面这样:

getJSON("/posts.json").then(function(json) {
 return json.post;
}).then(function(post) {
 // ...
});

  第一个回调函数完成以后,会将返回结果作为参数,传入第二个回调函数。

 看下面的这里例子:

getJSON("/post/1.json").then(function(post) {
 return getJSON(post.commentURL);
}).then(function funcA(comments) {
 console.log("Resolved: ", comments);
}, function funcB(err){
 console.log("Rejected: ", err);
});

  即第一个then又返回了一个promise,如何这个promise的状态变成了 Resolved,那么就会执行第二个then的第一个函数, 如果变成了 Rejected,就会执行第二个第二个函数。

第四部分: Promise.prototype.catch()

   Promise.prototype.catch()方法实际上是then(null, rejection)方法的别名, 这里使用catch()纯粹是为了便于使用和理解。

getJSON('/posts.json').then(function(posts) {
 // ...
}).catch(function(error) {
 // 处理 getJSON 和 前一个回调函数运行时发生的错误
 console.log('发生错误!', error);
});

  在之前的例子中,我们讲解then()方法接受两个参数,第一个参数是pending变成resolved之后执行的函数,它是必选的; 第二个参数是pending变成rejected之后执行的函数,它是可选的。

  我们建议,最后不要使用第二个参数,取而代之我们最好使用catch(),如下所示:

// bad
promise
 .then(function(data) {
 // success
 }, function(err) {
 // error
 });

// good
promise
 .then(function(data) { //cb
 // success
 })
 .catch(function(err) {
 // error
 });

  值得注意的是:catch()方法返回的还是一个Promise对象,我们可以在后面继续使用then进行链式调用。

第五部分:Promise.all()

  Promise.all()方法用于将多个Promise实例包装成一个新的Promise实例,如下所示:

var p = Promise.all([p1, p2, p3]);

  其中的p1,p2,p3都是Promise对象实例,如果不是,就会先调用下面讲到的Promise.resolve方法,将参数转为Promise实例,再进一步处理。

  p的状态由p1,p2,p3决定, 分成下面的两种情况:

•只有p1、p2、p3的状态都变成fulfilled,p的状态才会变成fulfilled,此时p1、p2、p3的返回值组成一个数组,传递给p的回调函数。

•只要p1、p2、p3之中有一个被rejected,p的状态就变成rejected,此时第一个被reject的实例的返回值,会传递给p的回调函数。

  让我们看看下面的具体的例子:

// 生成一个Promise对象的数组
var promises = [2, 3, 5, 7, 11, 13].map(function (id) {
 return getJSON("/post/" + id + ".json");
});

Promise.all(promises).then(function (posts) {
 // ...
}).catch(function(reason){
 // ...
});

  在这个例子中,通过数组的map生成了6个Promise对象,然后作为参数传递给了Promise.all() 只有这6个Promise对象最终返回的都是 resolved时, 才会调用Promise.all()后面then()方法。

第六部分:Promise.race()

  该方法同样是将多个Promise实例包装成一个新的Promise实例,如下:

var p = Promise.race([p1, p2, p3]);

  在上面的代码中,如果有一个Promise率先改变状态,p的状态就会跟着改变。

第七部分: Promise.resolve()

  如果我们希望将一个现有对象转化为Promise对象,我们就可以使用Promise.resolve()方法。根据参数的不同可以分为4种情况:

(1)参数是一个Promise实例

  如果参数是Promise实例,那么Promise.resolve将不做任何修改、原封不动地返回这个实例。

(2)参数是一个thenable对象

  如果参数是一个thenable对象,即具有then()方法的对象,那么Promise.resolve()就会将该对象立即转化成 Promise对象那个,并立即执行then方法。

(3)参数不是具有then方法的对象,或根本就不是对象

  如果参数是一个原始值,或者是一个不具有then方法的对象,则Promise.resolve方法返回一个新的Promise对象,状态为Resolved。

(4)不带有任何参数

第八部分: Promise.reject()

  Promise.reject(reason)方法也会返回一个新的 Promise 实例,该实例的状态为rejected。

第九部分: 理解Promise

  它的作用就是如果前面的一段代码非常的耗时,就会阻塞后面的某个代码片段。  所以我们希望他不要阻塞后面的代码,那么就让他异步好了。

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>testsettimeout</title>
</head>
<body>
 <div class="wrap">
  
 </div>
 <script>
 console.time("time");
 for (var i = 0; i < 50000; i++) {
  var li = document.createElement("li");
  document.querySelector(".wrap").append(li);
 }
 console.timeEnd("time");
 var a = 10;
 var b = a + 25;
 console.log( a);
 console.log(b);
 console.timeEnd("time");
 </script>
</body>
</html>

  最后的输出结果是:

  可以看到前面的代码在阻塞后面的代码。 导致后面的代码无法运行。

 因为我们希望这个耗时的代码越快执行越好,会非常严重的影响用户体验,所以把它放在了最前面,如果它没有什么用,就放在了最后面了。

  但是后面的代码我们也希望尽快执行啊,那么该怎么办呢?  如果可以让前面的代码单独在一个线程上运行, 而不影响后面的代码运行就好了。

setTimeout()就可以做到,如下所示:

 

 console.time("time");
 setTimeout(function() {
  for (var i = 0; i < 50000; i++) {
     var li = document.createElement("li");
     document.querySelector(".wrap").append(li);
    }
    console.timeEnd("time");
 }, 0);
 var a = 10;
 var b = a + 25;
 console.log(a);
 console.log(b);
 console.timeEnd("time");

  最终的输出结果如下:

  可以看到在setTimeout中的函数一开始就执行了。

  但是为什么setTimeout的内容执行的这么慢呢? 我们再看一个例子

 console.time("time");
 setTimeout(function() {
  console.timeEnd("time");
 }, 0);

  结果如下:

time: 2.234ms

即 setTimeout 自身就会先消耗一定的时间。

ok,那么说了半天Promise到底怎么和他们比较呢? 他的价值在哪里呢?

价值都在这里了!看下面的这个例子:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>testsettimeout</title>
</head>
<body>
 <div class="wrap">
 </div>
 <script>
 let promise = new Promise(function(resolve, reject) {
  console.log('Promise! 我是Promise对象里的函数,我最早出现是因为我要给后面一个耗时的家伙提供数据a');
  var a = 20;
  resolve(a);
 });
 promise.then(function(value) {
  console.log('哈哈哈,我得到数据a了,要开始执行喽。我是一个非常耗时的操作,依赖前面的数据,但是我想快一点执行,这有利于用户体验,所以别把我放在后头啊;我被放在了一个新的线程上,不会阻塞别人的');
  for (var i = 0; i < 1000000; i++) {
  var li = document.createElement("li");
  document.querySelector(".wrap").appendChild(li);
  }
  console.log("执行完毕");
 });
 console.log('Hi! 我是什么都不依赖的程序,但我也想快一点执行,不能委屈我啊');
 </script>
</body>
</html>

说明: 在已经执行过的情况下,录制屏幕,然后按下刷新键,可以发现,在new Promise里的函数是立即执行的,紧接着是promise.then()之后的函数立即执行,而没有等待then()函数,最后进入then()函数,说了一堆废话,最后大约2 ~ 3s之后执行结束。故promise.then()函数才是真正的异步执行。

promise实现:

<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <title>promise</title>
</head>
<body>
 <script>
 function Mypromise(fn) {
  this.state = 'pending';
  this.value = void 0;
  this.doneList = [];
  this.failList = [];
  // 在创建一个promise的时候,需要传递一个fn函数,接受参数resolve和reject。 
  // resolve和reject目前还没有定义,因为用户是直接调用的,如resolve('success'),所以这个resolve方法是需要我们自己来定义的。
  var self = this;
  function resolve(value) {
  // 一旦resolve,状态机的状态由pending -> resolved
  // 并且在resolve的时候状态必须是pending,才能转换状态。
  // 异步执行所有回调函数
  setTimeout(function () {
   if (self.state == 'pending') {
   self.state = 'resolved'
   self.value = value;
   // 一旦成功,我们就可以执行所有promise上挂载的 doneList 中所有的回调函数了,并将value值传递过去
   for (var i = 0; i < self.doneList.length; i++) {
    self.doneList[i](value);
   }
   }
  }, 0);
  }
  function reject(reason) {
  // 一旦reject,状态机的状态由pending -> rejected
  // 在reject的时候状态必须是pending,才能转化状态。
  // 异步执行所有回调函数
  setTimeout(function () {
   if (self.state == 'pending') {
   self.state = 'rejected'
   self.value = reason;
   // 一旦失败,我么就可以把所有的 failList 调用了,并且传递 reason
   for (var i = 0; i < self.failList.length; i++) {
    self.failList[i](reason);
   }
   }
  }, 0);
  }
  fn(resolve, reject);
 }
 Mypromise.prototype = {
  constructor: Mypromise,
  // then方法接受成功时的回调和失败时的回调
  // 实际上,这里的then方法就像路由中的注册路由一样,是一个注册的过程,而没有真正的调用。
  // 并且then是支持链式调用的,所以then应该返回一个promise。 如果返回旧的,那么因为状态不能改变,所以没有意义,所以我么一定要返回一个新的promise,这样这个状态机才可以再次正常的工作。
  then: function (onResolved, onRejected) {
  var self = this;
  // 对于then而言,最终要返回一个新的promise,这样才支持链式调用。
  var promise2;
  // 这里要做一个判断,看传递进来的是否是一个函数,如果是,则不变,如果不是,就拒绝。
  // 如果是promise.then().then().then(function (value) {}); 我们还希望拿到value,那么就要把value在即使没有用到onResolved的时候也传递下去。对于reason也是如此。
  onResolved = typeof onResolved == 'function' ? onResolved : function (value) {return value;}
  onRejected = typeof onRejected == 'function' ? onRejected : function (reason) { return reason;}
  // 下面这一部分是比较核心的内容,因为then最终要返回一个promise,但是,这个promise究竟应该怎么返回呢? 如果在then中,用户就返回了promise,那么我们就用户的,如果用户用的不是promise,那么我么就要自己封装好这个promise了。 
  // 注意: promise也是需要异步调用的,所以可以使用promise进行封装。
  switch(this.state) {
   case 'resolved': 
   // 如果resolved,则返回一个新的promise
   return promise2 = new Mypromise(function (resolve, reject) {
    setTimeout(function () {
    try {
     // 这里相当于直接就给执行了,看看返回的是什么值,如果是promise,那么直接就使用这个promise了。 
     var x = onResolved(self.value);
     if (x instanceof Mypromise) {
     x.then(resolve, reject);
     }
    } catch (e) {
     reject(e);
    }
    }, 0)
   })
   case 'rejected': 
   // 如果rejected,同样也需要返回一个新的promise
   return promise2 = new Mypromise( function (resolve, reject) {
    setTimeout(function () {
    try {
     var x = onRejected(self.value);
     if (x instanceof Mypromise) {
     x.then(resolve, reject);
     } 
    } catch (e) {
     reject(e);
    }
    }, 0);
   })
   // 如果是pending状态,我们就不能确定使用什么,等到状态确定之后才能决定。 
   case 'pending':   
   return promise2 = new Mypromise(function () {
    // 注意:一般then都是执行的这里, 即在then的时候进行注册,把相应的成功的和失败的都会初测在这里,push的是一个函数,所以这里的onResolved还是没有执行的。
    setTimeout(function () {
    self.doneList.push(function (value) {
     try {
     var x = onResolved(self.value)
     if (x instanceof Mypromise) {
      x.then(resolve, reject)
     } else {
      onResolved(value);
     }
     } catch (e) {
      reject(e)
     }
    });
    console.log(self.doneList)
    self.failList.push(function (value) {
     try {
     var x = onRejected(self.data);
     if (x instanceof Mypromise) {
      x.then(resolve, reject);
     }
     } catch (e) {
     }
    });
    }, 0);
   })
   default: 
   console.log(this.state);
   return;
  }
  }, 
  catch: function (onRejected) {
   return this.then(null, onRejected);
  }
 }
 var promise = new Mypromise(function (resolve, reject) {
  if (5 > 3) {
  resolve('success');
  }
 });
 promise.then(function (value) {
  console.log('哈哈哈哈或');
 });
 </script>
</body>
</html>

总结

以上所述是小编给大家介绍的ES6中的promise,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对脚本之家网站的支持!

您可能感兴趣的文章:
阅读全文