ES6学习——Promises：应用示例

这篇文章看几个应用Promise的例子。

1）封装普通的ajax成Promise模式，jQuery等的ajax调用已经内置了对promise模式的支持

function httpGet(url) {
return new Promise(function (resolve, reject) {
let request = new XMLHttpRequest();

request.onreadystatechange = function () {
if (this.status === 200) {
resolve(this.response);
} else {
reject(new Error(this.statusText));
}
}
request.onerror = function () {
reject(new Error('XMLHttpRequest Error: '+this.statusText));
};

request.open('GET', url);
request.send();
});
}

httpGet('http://example.com').then(
function (value) {
console.log(value);
},function (reason) {
console.error(reason);
}
);

2）封装setTimeout为延迟执行函数

function delay(time) {
return new Promise( function(resolve,reject){
setTimeout( resolve, time );
});
}

delay(100).then(function STEP2(){
console.log("step 2 (after 100ms)");
return delay(200);
}).then(function STEP3(){
console.log( "step 3 (after another 200ms)" );
});

3）封装setTimeout成检测超时函数

function timeout(ms, promise) {
return new Promise(function (resolve, reject) {
promise.then(resolve);
setTimeout(function () {
reject(new Error('Timeout after '+ms+' ms'));
}, ms);
});
}

timeout(5000, httpGet('http://example.com'))
.then(function (value) {
console.log(value);
})
.catch(function (reason) {
console.error(reason);
});

4）Promise提供了all和race的工具方法，我们还可以自己搞个first，last服务于自己的业务

Promise.first = function(prs) {//只考虑第一个fulfilled的promise，忽略rejected
return new Promise(function(resolve,reject){
prs.forEach(function(pr){
Promise.resolve(pr).then(resolve);
});
});
};

Promise.last = function(prs) {//只考虑最后一个fulfilled的promise，忽略rejected
return new Promise(function(resolve,reject){
let i=0;
prs.forEach(function(pr){
Promise.resolve(pr).then(function(value){
++i >= prs.length && resolve(value);
});
});
});
};

var p1 = delay(500).then(function(){return Promise.resolve(100)});
var p2 = delay(700).then(function(){return Promise.resolve(200)});
var p3 = delay(300).then(function(){return Promise.resolve(300)});

Promise.first([p1,p2,p3]).then(function(value){
console.log("first",value);//first 300
});

Promise.last([p1,p2,p3]).then(function(value){
console.log("last",value);//last 200
});

5）最后看一个Promise.map方法，类似数组的map

Promise.map = function(vals,cb) {
return Promise.all(
vals.map(function(pr){
return new Promise(function(resolve){
cb(pr, resolve);
});
});
)
};

var p1 = Promise.resolve( 21 );
var p2 = Promise.resolve( 42 );
var p3 = Promise.reject( "Oops" );

Promise.map([p1,p2,p3], function(pr,done){//数组内的promises同时执行，并对结果做一定的处理
Promise.resolve(pr).then(function(v){
done(v * 2);
},done);
})
.then( function(vals){
console.log( vals ); // [42,84,"Oops"]
});

*以上全部代码在Chrome 47下通过测试