1

我正在尝试使用 jQuery 调用三个服务。前两个获取数据，第三个使用数据进行更新。

第一部分：我想获取我的银行账户信息：

  • 从 Foo Bank，我想得到我的支票
  • 从酒吧银行，我想得到我的积蓄

第二部分：当我从两家银行成功获取信息后，我想通过自己的服务将其上传到我的个人支票簿。

这是一些看起来像 Javascript 的伪代码。如果我可以编写同步代码来完成这项工作，这就是我会写的，我知道我做不到。

--PSEUDO CODE

var go = function () {
    var acctId;

    acctId = 12345;
    var myInfo = getAccounts(acctId);
    updateCheckbook(myInfo);
}

var getAccounts = function(acctId){
    var myInfo;

    myInfo = {
        id: acctId,
        fooDollars: GetFooBank(acctId),
        barDollars: GetBarBank(acctId)
    };

    return myInfo;
}

var updateCheckbook(myInfo){
    $.post('http://mySite.com/checkbook/', myInfo);
}

//I want to get the amount from my foo bank account
//Foo Bank uses a web service that allows cross site access
//No bank would ever do this, but I just want to understand how to with $.getJSON.
var fooDollars = function (id) {
    var value;
    $.getJSON('http://foobank.com/accounts/' + id, null, function (data) {
        value = data.checking;
    });

    //I'm pretty sure this is wrong with an asynchronous call.
    return value;
};

var barDollars = function (id) {
    //have to use jsonp for bar bank
    $.ajax({
        url: 'http://barbank.com/accounts/' + id + '&callback=updateBar',
        dataType: 'jsonp'
    });

    //Not really sure how to return a value from a jsonp ajax call
    return value;
};

function updateBar(data) {
    //Need to take data.savings and get the value back to getAccounts.
    //How? I have no idea. 
}

我有点了解 jQuery 的延迟方法的作用，但我对所有部分如何组合在一起有点混淆。尤其是：

  1. 在第一部分中，我需要等待两个银行账户服务都完成，然后再进行下一步。jQuery when 处理等待多个延迟，但我无法理解您如何等待多个函数返回值。
  2. 在第 1 部分，Foo Bank 中，我调用了$.getJSON. 我想获取返回的数据对象并获取 data.checking。如何将该信息返回到 getAccounts() ？
  3. 在第 1 部分，酒吧银行，类似于第 2 部分，除了我如何使用 JSONP 做到这一点？
  4. 如果我完全偏离了轨道并且应该以不同的方式看待它，那么我也很感激这种反馈。
4

2 回答 2

3

诀窍是返回承诺，而不是价值，来自fooDollars()and barDollars()（并且为了更好地衡量来自updateCheckbook()）。$.when().then()ingo()在触发其回调之前等待两个承诺都被履行。

坚持您当前的功能阵容，并将（尽可能）伪代码转换为实际代码，我得到以下信息：

var go = function () {
    var acctId = 12345;
    $.when.apply(null, getAccounts(acctId)).then(function(a1, a2){
        return updateCheckbook({
            id: acctId,
            fooDollars: a1[0].checking,
            barDollars: a2[0].savings
        });
    }).done(function() {
        alert("Checkbook updated");
    });
}

var getAccounts = function(acctId){
    return [
        fooDollars(acctId),
        barDollars(acctId)
    ];
}

var updateCheckbook(myInfo){
    return $.post('http://mySite.com/checkbook/', myInfo);
}

var fooDollars = function (id) {
    return $.getJSON('http://foobank.com/accounts/' + id);
};

var barDollars = function (id) {
    return $.ajax({
        url: 'http://barbank.com/accounts/' + id,
        dataType: 'jsonp'
    });
};

如果您愿意，这将稍微简化，getAccounts()通过fooDollars()直接barDollars()从go().

唯一我不太确定的是jsonp。可能需要一些工作。

于 2013-06-26T21:10:12.580 回答
2

异步函数不返回值。这是您的代码中最大的缺陷。fooDollars不能回来value。getAccounts不能返回myInfo（假设getAccounts也执行 ajax）。

相反，让您的函数返回jqXHR对象（这也是一个承诺对象）。

var fooDollars = function (id) {

    return $.getJSON('http://foobank.com/accounts/' + id);

};

做同样的事情getAccounts（我假设它也做ajax），那么你可以这样做：

$.when(fooDollars('foo'),getAccounts('bar')).done(function(fD,gA){
    console.log(fD[0].checking);
    console.log(gA[0]);
})
于 2013-06-26T20:46:08.393 回答