javascript - 请大牛解答Jquery AJAX如何使用Promise/Deferred实现顺序执行?
PHPz
PHPz 2017-04-10 16:05:49
[JavaScript讨论组]

因为每次get到数据是下次请求的参数
目前我是层层嵌套,不好维护,可读性也很差,大致流程如下:

function get(){
    $.ajax({
        url:'test.php',
        success:function(){
            $.ajax({
                url:'test1.php',
                success:function(){
                    $.ajax({
                        url:'test2.php',
                        success:function(){
                            $.ajax({
                                url:'test3.php',
                                success:function(){
                                    //TODO
                                }
                            })
                        }
                    })
                }
            })
        }
    })
}

for(i=0;i

大牛勿笑,就是这么蛋疼,希望能帮帮我,谢谢

PHPz
PHPz

学习是最好的投资!

全部回复(3)
黄舟
function get(){
    $.ajax({
        url:'test.php'
    }).then(function(){
        return $.ajax({ url:'test1.php' });
    }).then(function(){
        return $.ajax({ url:'test2.php' });
    }).then(function(){
        return $.ajax({ url:'test3.php' });
    }).then(function(){
        //TODO here
    });
}

for(i=0;i<list.length;i++){
    get()
}
大家讲道理
$.ajax("test1.php").then(function(data) {
    // data 是 test1.php 的返回值
    return $.ajax("test2.php");
}).then(function(data) {
    // data 是 test2.php 的返回值
    return $.ajax("test3.php");
}).then(function(data) {
    return $.ajax("test4.php");
});
怪我咯

请查看我写的gist, 代码如下

// test methods fun1 and fun2 for test
var fun1 = function () {
    var deferred = $.Deferred();

    setTimeout(function () {
        console.log('I am fun1');
        deferred.resolve();
    }, 1000);

    return deferred.promise();
}

var fun2 = function () {
    var deferred = $.Deferred();

    setTimeout(function () {
        console.log('I am fun2');
        deferred.resolve();
    }, 1000);

    return deferred.promise();
}

// make test jQuery asynchronous methods array
var arr = [fun1, fun2];

// This the target method for implementing that call jQuery asyn methods recursively
var recursive = function(i, arr) {
    return execute(arr[i]).then(function() {
        if (i + 1 < arr.length) {
            recursive(i + 1, arr);
        }
    });
    
    function execute(func) {
        return func();
    }
}

// run our test
recursive(0, arr);

至于你的代码,可以写成这样的:

function call1() {
    return $.ajax({url:'test1.php'});
}
function call2() {
    return $.ajax({url:'test1.php'});
}

arr = [call1, call2];

var recursive = function(i, arr) {
    return execute(arr[i]).then(function() {
        if (i + 1 < arr.length) {
            recursive(i + 1, arr);
        }
    });
    
    function execute(func) {
        return func();
    }
}

// run our test
recursive(0, arr);
热门教程
更多>
最新下载
更多>
网站特效
网站源码
网站素材
前端模板
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号