最近在接触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还有一些高级的用法,详情请参考阮一峰老师的教程。
如果以上有什么疏漏或者错误的地方,欢迎各位大神指正,谢谢大家。


elliott_hu
204 声望7 粉丝

路上自带音乐脑放的doooooooooge.