es6 标准 Promise 学习笔记
es6离我们越来越近 node4.0也推出了 原生浏览器 也逐渐支持promise他能帮助我们从个callback hell中脱离出来
为什么我们要使用promise呢？
fs.readFile("a.json",function(e1,d1){
if(e1){
//todo
}else{
fs.readFile("b.json",function(e2,d2){
if(e2){
//todo
}else{
console.log(d1+d2)
}
})
}
})oh no一层一层的千层酥啊 里面还夹杂着丑陋的if else
看看promise版本
var promise = new Promise(function(onFulfill,onReject){
fs.readFile("a.json",functiom(err,data){
if(err){
onReject(err);
}else{
onFulfill(data);
}
});
});
promise.
then(function(data){
return JSON.parse(data)
},function(err){
throw new Eerror(err)
}).
then(function(json){
console.log(json)
}).catch(function(e){
console.log(e)
})
多么优雅的方式 然而我们现在就可以在浏览器环境中使用他们
*Chrome 32、Opera 19 和 Firefox 29 以上的版本已经默认支持 Promise。
*在不支持promise的浏览器环境中可使用 promise polyfill
promise 的方法
Promise.prototype.then
then是promise中核心方法 接受一个onFulfill，onReject作为参数 并返回一个promise
var p1 = new Promise(function(fulfill,reject){
setTimeout(fulfill,3000);
});
p1.then(function(){
return "yeah"
}).then(function(v){
alert(v) //yeah
})Promise.prototype.catch
catch 接受一个function作为参数 别的地方throw时 将会中断promise链 进入catch 并返回一个promise
var p1 = new Promise(function(f,r){
JSON.parse("..");
});
p1.then(function(){ alert(2) },function(v){ throw "a" })
.then(alert)
.catch(function(b){
alert(b) //a
});
var p1 = new Promise(function(f,r){
f(1)
})
p1.then(function(){
throw "a"
},function(e){
console.log("r"+e)
})
.catch(function(e){
console.log(e) //a
})
*在第二个例子中的throw 将直接进入catch 不要期待进入 console.log("r"+e) 因为其onRecject是p1的而不是这一层then的
Promise.resolve
这是一个静态方法
参数为 value 或者一个 thenable 对象 并返回一个promise
Promise.resolve(1)
.then(function(v){
console.log("solve "+v) //solve 1
},function(v){
console.log("reject "+v)
})
.catch(function(e){
console.log(e)
})
/////////////////////////////////////解析thenable对象///////////////////////////////////////////////////
Promise.resolve({
then:function(f,r){
f(22);
}
})
.then(function(v){
console.log("solve "+v) //solve 1
},function(v){
console.log("reject "+v)
})
.catch(function(e){
console.log(e)
})
Promise.resolve({
then:function(f,r){
r("ww");
}
})
.then(function(v){
console.log("solve "+v)
},function(v){
console.log("reject "+v)//reject ww
})
.catch(function(e){
console.log(e)
})
Promise.resolve({
then:function(f,r){
throw new Error("abc")
}
})
.then(function(v){
console.log("solve "+v)
})
.catch(function(e){
console.log(e) // Error: abc(…)
})Promise.reject
这是一个静态方法
接受一个reason作为参数返回一个拒绝的promise
Promise.reject("reason")
.then(function(v){
console.log(v)
},function(v){
console.log("reject "+v) //reject reason
})
.catch(function(e){
console.log(e)
})
Promise.reject(new Error("fail"))
.then(alert) //未执行
.catch(function(e){
console.log(e) //Error: fail(…)
})Promise.all
这是一个静态方法
all方法接受一个可迭代的类型，当全部完成是调用onfillfulled,有一个错误时带错误参数进入onReject，其余的完成或拒绝都不会触发onFillful或者onReject
var p1 = new Promise(function(f,r){
setTimeout(function(){
f(1)
},1000)
})
var p2 = new Promise(function(f,r){
setTimeout(function(){
f(2)
},2000)
})
Promise.all([p1,p2])
.then(function(v){
console.log(v); // 两秒后 [1, 2]
}) 失败的
var p1 = new Promise(function(f,r){
setTimeout(function(){
f(1)
},1000)
})
var p2 = new Promise(function(f,r){
setTimeout(function(){
r(2)
},2000)
})
Promise.all([p1,p2])
.then(null,function(arr){
console.log(arr); // 两秒后2
}) Promise.race
race传入一个可迭代的对象作为参数，当其中任意一个promise对象变成fillful或者reject状态，执行他的onFillful或者onReject,其余的完成或拒绝都不会触发onFillful或者onReject
这是一个静态方法
var p1 = new Promise(function(f,r){
setTimeout(function(v){
r(1)
},1000)
})
var p2 = new Promise(function(f,r){
setTimeout(function(v){
f(2);
},5000)
})
var p3 = new Promise(function(f,r){
setTimeout(function(v){
r(3)
},1000)
})
Promise.race([p1,p2,p3])
.then(function(v){
console.log(v)
},function(e){
console.log("拒绝"+e) //一秒 拒绝1
})其实我的理解就是看谁快 = =
*小细节 all与race 的参数 p1 与 p3都为1秒与 数组顺序无关 与promise声明顺序有关 p1 比p3 先声明所以先被触发
*race和all是一对兄弟 all全部执行完才触发onFullifll ，而race相反 获得最快的那个
完整例子
new Promise(function(r,j){
setTimeout(function(){
r('{"name":"abc"}')
},300)
}).then(function(data){
return JSON.parse(data)
}).then(function(json){
var p = new Promise(function(r,j){
setTimeout(function(){
r(['{"name":"edf"}',json])
},300);
setTimeout(function(){
j(new Error("time out"));
},300);
})
return p
}).then(function(arr){
return [ JSON.parse(arr[0] ),arr[1] ]
},function(err){
throw err
}).then(function(arr){
return arr[1].name + arr[0].name
}).then(function(str){
console.log(str);
})
.catch(function(e){
if(e.message === "time out"){
console.log("time out")
}else{
console.log(e)
}
})
感谢 备忘：
- MDN
- JavaScript Promise迷你书（中文版）