ES6-Promise对象 (下)

作者: 卓三阳 | 来源:发表于2017-11-15 22:20 被阅读81次

1.Promise对象方法

（1）Promise.all(iterable);

Promise.all方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。
参数：一个可迭代对象，例如一个Array
像这样：

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

p的状态由p1、p2、p3决定，分成两种情况。
（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。
（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

let p1 = Promise.resolve(3);
let p2 = 1337;
let p3 = new Promise((resolve, reject) => {
    setTimeout(resolve, 100, "foo");
}); 

Promise.all([p1, p2, p3]).then(values => { 
    console.log(values); 
    // [3, 1337, "foo"] 
});

如果iterable包含非promise值，则它们将被忽略，但仍然计入返回的promise数组值（如果promise已满足）：

var p1 = Promise.all([1,2,3]);
var p2 = Promise.all([1,2,3, Promise.resolve(444)]);
var p3 = Promise.all([1,2,3, Promise.reject(555)]);

//setTimeout运行机制，等到当前脚本的同步任务和“任务队列”中已有的事件，全部处理完以后，执行setTimeout指定的任务。
setTimeout(function(){
    console.log(p1);
    console.log(p2);
    console.log(p3);
});

//结果：
//[Log] Promise {status: "resolved", result: [1, 2, 3]}
//[Log] Promise {status: "resolved", result: [1, 2, 3, 444]} 
//[Log] Promise {status: "rejected", result: 555}

Promise.all的异步性和同步性

如果参数不为空（异步）

var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
var p = Promise.all(resolvedPromisesArray);
console.log(p);

setTimeout(function(){
    console.log('the stack is now empty');
    console.log(p);
});

// 结果：
// Promise { <state>: "pending" } 
// the stack is now empty
// Promise { <state>: "fulfilled", <value>: Array[2] }

如果参数为空（同步）

var p=Promise.all([]);
console.log(p);   //Promise {status: "resolved", result: []}

Promise.all 一旦reject立即返回

var p1 = new Promise((resolve, reject) => { 
  setTimeout(resolve, 1000, 'one'); 
}); 
var p2 = new Promise((resolve, reject) => { 
  setTimeout(resolve, 2000, 'two'); 
});

var p3 = new Promise((resolve, reject) => {
  reject('reject');
});

Promise.all([p1, p2, p3).then(values => { 
  console.log(values);
}, reason => {
  console.log(reason)
});

//From console:
//"reject"

如果作为参数的 Promise 实例是catch（）后产生的，返回的还是resolved状态的Promise，这个我们参照then方法的返回值，因为catch（）也是then方法的特例

var p1 = new Promise((resolve, reject) => {
  resolve('我是对的');
})
.then(result => result)  
.catch(e => e);

var  p2 = new Promise((resolve, reject) => {
  throw new Error('报错了');
})
.then(result => result)
.catch(e => e);    //本质上返回的还是resolved状态的Promise

Promise.all([p1, p2])
.then(result => console.log(result))   //执行这个
.catch(e => console.log(e));

结果：
["我是对的", Error: 报错了] (2)

到这里，我们终于讲完了all（）方法，我们趁热打铁，写一个同步请求数据,异步处理的例子

// 请求1
function  rq1 () {
    var promise = new Promise(function(resolve,reject){
        $.ajax({
            url:"XXX",
            type:"POST",
            data:{
                id:'20151002262'
            },
            success:function(msg){
                resolve(msg)
            }
        })
    })  
    return promise;
}
// 请求2
function  rq2 () {
    var promise = new Promise(function(resolve,reject){
        $.ajax({
            url:"XXX",
            type:"POST",
            data:{
                score:'666'
            },
            success:function(msg){
                resolve(msg)
            }
        })
    })  
    return promise;
}

Promise.all([rq1(),rq2 () ])
.then(function(res){
    console.log(res);
})

(2)Promise.race(iterable);

Promise.race方法同样是将多个Promise实例，包装成一个新的Promise实例。

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

不同的是，只要p1, p2, p3中任意一个实例率先改变状态，则p的状态就跟着改变，而且状态由率先改变的实例决定。

描述：
race 函数返回一个 Promise，它将与第一个传递的 promise 相同的完成方式被完成。它可以是完成（ resolves），也可以是失败（rejects），采用第一个promise的值作为它的值，从而异步地解析或拒绝（一旦堆栈为空）。

如果传的迭代是空的，则返回的 promise 将永远等待。

Promise.race的异步性

var resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];
var p = Promise.race(resolvedPromisesArray);
console.log(p);

setTimeout(function(){
    console.log('the stack is now empty');
    console.log(p);
});

//结果
//[Log] Promise {status: "pending"} 
//[Log] the stack is now empty 
//[Log] Promise {status: "resolved", result: 33}

（3）Promise.resolve()

Promise.resolve(value)方法返回一个以给定值解析后的Promise对象。但如果这个值是个thenable（即带有then方法），返回的promise会“跟随”这个thenable的对象，采用它的最终状态（指resolved/rejected/pending/settled）；否则以该值为成功状态返回promise对象。

语法

Promise.resolve(value);
Promise.resolve(promise);
Promise.resolve(thenable)

对一个普通值进行resolve，Promise.resolve方法返回一个新的Promise对象，状态为resolve。

Promise.resolve("Success").then(function(value) {
  console.log(value); // "Success"
}, function(value) {
  // 不会被调用
});

Resolve另一个promise对象,参数是一个Promise实例，那么Promise.resolve将不做任何处理，直接返回这个实例。

var original = Promise.resolve("patty");
var cast = Promise.resolve(original);
cast.then(function(v) {
  console.log(v); // true
});

resolve thenable的对象们，参数是一个thenable对象，也就是说对象是具有then方法的对象

// 1.Resolve一个thenable对象
var p1 = Promise.resolve({ 
  then: function(onFulfill, onReject) { onFulfill("fulfilled!"); }
});
console.log(p1 instanceof Promise) // true, 这是一个Promise对象

p1.then(function(v) {
    console.log(v); // 输出"fulfilled!"
  }, function(e) {
    // 不会被调用
});

// 2.Thenable在callback之前抛出异常
// Promise rejects
var thenable = { then: function(resolve) {
  throw new TypeError("Throwing");
  resolve("Resolving");
}};

var p2 = Promise.resolve(thenable);
p2.then(function(v) {
  // 不会被调用
}, function(e) {
  console.log(e); // TypeError: Throwing
});

// 3.Thenable在callback之后抛出异常
// Promise resolves
var thenable = { then: function(resolve) {
  resolve("Resolving");
  throw new TypeError("Throwing");
}};

var p3 = Promise.resolve(thenable);
p3.then(function(v) {
  console.log(v); // 输出"Resolving"
}, function(e) {
  // 不会被调用
});

(4)Promise.reject()

Promise.reject(reason)方法返回一个用reason拒绝的Promise。reason如果是Promise，依然作为回调函数参数返回。
语法

Promise.reject(reason);
静态函数Promise.reject返回一个被拒绝的Promise。使用是Error实例的reason对调试和选择性错误捕捉很有帮助。

Promise.reject("Testing static reject").then(function(reason) {
  // 未被调用
}, function(reason) {
  console.log(reason); // "测试静态拒绝"
});

Promise.reject(new Error("fail")).then(function(error) {
  // 未被调用
}, function(error) {
  console.log(error); // 堆栈跟踪
});

2.Promise对象的两个实用方法

下面将要实现的两种方法在ES6中并未标准化，但是实现并不是很难

（1）Promise.prototype.done(onFulfilled, onRejected)

上一次讲到Promise对象的回调链，不管以then方法或者catch方法结尾，要是最后一个方法抛出错误，都有可能无法捕捉到，因为Promise内部的错误不会冒泡到全局，因此，我们可以提供一个done方法，总是处理回调链的尾端，保证抛出任何可能出现的错误。
我们一起来看看done（）的实现

Promise.prototype.done = function (resolve, reject) {
    this.then(resolve, reject)
        .catch( function (reason) {
            // 抛出一个全局错误
            setTimeout( () => { throw reason }, 0);
        });
}

// 使用示例
var p = new Promise( (resolve, reject) => {
    resolve('p');
});
p.then(ret => {
    console.log(ret);
    return 'then1';
}).catch( err => {
    console.log(err.toString());
}).then( ret => {
    console.log(ret);
    return 'then2';
}).then( ret => {
    console.log(ret);
    x + 2;
}).done();

运行结果：

res.png

这是Promise官方API实现的done（）

done.png

（2）Promise.prototype.finally(onResolved)

finally方法用于指定不管Promise对象最后的状态如何，都会执行的操作，它与done方法最大的区别就是，它接受一个普通函数作为参数，该函数不管怎么样都必须执行。

Promise.prototype.finally = function (callback) {
    let P = this.constructor;
    return this.then(
        ret => P.resolve(callback()).then( () => ret),
        err => P.resolve(callback()).then( () => {throw reason })
    );
};

到这里，Promise的方法终于讲完了！！！

3.Promise的优劣势

从上面几个小节综合来看，可以看到Promise其实就是做了一件事情，那就是对异步操作进行了封装，然后可以将异步操作以同步的流程表达出来，避免了层层嵌套的回调函数，同时提供统一的接口，使得控制异步操作更加容易。

但是，Promise也有一些缺点：

无法取消Promise，一旦新建它就会立即执行，无法中途取消。
如果不设置回调函数，Promise内部的错误不会反应到外部。
当处于未完成态时，无法得知目前进展到哪一个阶段。

4. Promise与generator的结合

Generator 函数是 ES6 提供的一种异步编程解决方案，语法行为与传统函数完全不同。使用Generator函数来管理流程，遇到异步操作的时候，通常返回一个Promise对象。

参考资料：
Promise
ECMAScript 6 入门
 JavaScript Promise迷你书

ES6-Promise对象 (下)

1.Promise对象方法

（1）Promise.all(iterable);

(2)Promise.race(iterable);

（3）Promise.resolve()

(4)Promise.reject()

2.Promise对象的两个实用方法

（1）Promise.prototype.done(onFulfilled, onRejected)

（2）Promise.prototype.finally(onResolved)

3.Promise的优劣势

4. Promise与generator的结合

相关文章

网友评论

延伸阅读

深度阅读

栏目导航

热点阅读

Web前端之路

让前端飞