使用Jscex优化Ajax操作体验

Ajax是异步的，这是它的优势，但是写出的代码却不那么美观，处处的回调函数总让人不爽，碰到嵌套的情况则会让人抓狂了。

设想这样的情况，一个Ajax请求需要一个参数data,而这个参数是另外一个Ajax请求的结果。按照一般的写法(Ajax使用了jQuery)：

            $(function(){
                $.ajax({
                    url:"/getFirstData",
                    success:function(firstData){
                        //firstData：第一个结果

                        //第二次请求
                        $.ajax({
                            url:"/getSecondData",
                            data:{data:firstData},
                            success:function(secondData){
                                //这里猜得到第二次请求的值
                            }
                        })
                    }
                })
            })

看起来也可以接受，但是如果第一个结果不符合要求需要重新获取呢？修改之后的代码简直无法想象。

Jscex是一个优秀的异步JS库，借助它我们可以写出“顺序”的代码。

首先我给jQuery.ajax写一个Jscex适配器

jQuery.ajaxJscex = function (option) {
    var delegate = {
        "onStart": function (callback) {
            jQuery.extend(option, {
                success: function (data) {
                    callback("success", data);
                },
                error: function () { callback("failure"); }
            });
            $.ajax(option);
        }
    };
    return new Jscex.Async.Task(delegate);
}

然后上面的逻辑代码就可以简化为

                var task = eval(Jscex.compile("async",function(){
                    //第一结果
                    var firstData = $await($.ajaxJscex({
                        url: '/getFirstData'
                    }));
                    //第二结果
                    var secondData = $await($.ajaxJscex({
                        url: '/getFirstData',
                        data:{data:firstData}
                    }));
                }));
                task().start();

很清晰。

关于更多Jscex的信息请查看老赵的博客。

希望对你有用。