深入解析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

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:http://www.heiqu.com/f1e91a881fd1efc6dec6311fade7fa74.html