最近在接触react-redux异步action的时候,有一个异步的写法非常有意思。应用了Promise对象,很好解决了不优雅的金字塔结构代码。
传统的回调代码一层套一层,当你想要写一个异步请求,请求里面又带着请求的时候,该怎么做呢。
没有使用Promise对象的时候,代码是这样的:
$.getJSON(url,req,function(data,status){
if(status == "success"){
$.getJSON(url,data,function(data,status){
if(status == "success"){
$.getJSON(url,data,function(data,status){
if(status == "success"){
//.....
}else{
throw new Error("error")
}
})
}else{
throw new Error("error");
}
})
}else{
throw new Error("error");
}
})
再来几次估计我们会崩溃的,现在我们用Promise的方法来写一遍:
var promise = new Promise((resolve,reject) => {
$.getJSON(url,data,function(data,status){
if(status == "success"){
resolve(data)
}else{
var error = new Error("error");
reject(error)
}
})
})
.then((data) => {
return new Promise((resolve,reject) => {
$.getJSON(url,data,function(data,status){
if(status == "success"){
resolve(data)
}else{
var error = new Error("error");
reject(error)
}
})
})
},(error) => { throw error })
.then((data) => {
return new Promise((resolve,reject) => {
$.getJSON(url,data,function(data,status){
if(status == "success"){
resolve(data)
}else{
var error = new Error("error");
reject(error)
}
})
})
},(error) => { throw error })
怎么样,是不是觉得每一步都清晰很多,尤其是回调中的操作更多的时候,这种步骤感更加明显。
新同学肯定会有些迷惑,接下我就一步一步的重现我的探索过程。给同样在学习路上的你们提供一点帮助吧
首先我们可以尝试写一个最简单的例子
var promise = new Promise((resolve,reject) => {
var a = 1;
if( a > 0 ){
resolve(a);
}else{
reject(error);
}
})
当我们新建了一个promise实例的时候,里面的function会立即执行
参数resolve代表该符合条件时触发的触发的函数。reject表示程序异常的处理函数。
接下来我们就可以通过.then来触发下面的步骤。
promise.then(
(data) => { console.log(data) },
(error) => { console.log(error) }
)
因为我们是符合条件的,所以我们会看到输出的结果是 1
当然我们改造一下当前调用,可以继续执行下去。
上一个函数return 的值,就是我们下面要调用函数的data;
promise.then(
(data) => {
console.log(data);
return data+1;
},
(error) => { console.log(error) }
).then(
(data) => {
console.log(data);
}
)
输出结果是 1 2
这时候细心的同学就会发现了,如果我们抛出异常的话 输出结果 就是一个error 和 undefined,这显然不是我们想要达到的效果。那么怎么让他reject的时候停止执行下面的函数呢。
很简单,只要把错误给抛出就可以了。这样的话就不会继续执行下去了。
promise.then(
(data) => {
console.log(data);
return data+1;
},
(error) => { throw error }
).then(
(data) => {
console.log(data);
}
)
当promise里面也是一个异步请求的时候,我们只需要在最后返回一个新的Promise 实例,就可以实现异步的顺序执行。
promise.then(
(data) => new Promise((resolve,reject) => {
var b = 0;
if(b<1){
resolve(b);
}else{
reject(error);
}
}),
(error) => { throw error }
).then(
(data) => { console.log(data); },
(error) => { throw error }
)
以上就实现了一个简单的例子编写啦,当然promise还有一些高级的用法,详情请参考阮一峰老师的教程。
如果以上有什么疏漏或者错误的地方,欢迎各位大神指正,谢谢大家。
**粗体** _斜体_ [链接](http://example.com) `代码` - 列表 > 引用
。你还可以使用@
来通知其他用户。