如何确定所有ajax请求都已解决？

Question

这是我的代码：

function ajaxRequest(value, path, website){
    var status = false;
    return new Promise(function (resolve, reject) {
        window[website] = $.ajax({
            url :  path,
            type : 'GET',
            data: { "name": value,
                    "_token": $('meta[name="_token"]').attr('content')
            },

            beforeSend: function(){
                if(window[website] != null) {
                    window[website].abort();
                }
            },
            success: function (people) {
                status = true;
                resolve([status, people]);
            },

            error: function (jqXHR, textStatus, errorThrown) {
                reject([status, textStatus]);

            },

            timeout: 20000

        });
    });
}

我这样调用该函数：

ajaxRequest('Jack', 'search/twitter', 'twitter').then(function(res) { console.log(res)}, function(err){console.log(err)});
ajaxRequest('Jack', 'search/instagram', 'instagram').then(function(res) { console.log(res)}, function(err){console.log(err)});

现在，我需要知道这两个ajax请求已完成。 我怎样才能做到这一点？

注意，我认为我必须使用promise.all() ，但是不确定在我的情况下如何使用它。

Answer 1

没错， promise.all()的发明就是为了解决这个问题。 它所做的只是返回一个新的 Promise，当所有给定的Promise都解决后，该Promise将解决。

就您而言，您可以使用Promise.all来包装您的2个Ajax调用。

promise.all([
   ajaxRequest('Jack', 'search/twitter', 'twitter').then(function(res) { console.log(res)}, function(err){console.log(err)}),
   ajaxRequest('Jack', 'search/instagram', 'instagram').then(function(res) { console.log(res)}, function(err){console.log(err)})
]).then(([response1, response2]) => {
   // Here you execute your logic when both of the promises are resolved.
})

Answer 2

您可以将函数调用传递给$.when() 。 注意， jQuery.ajax()返回一个jQuery Promise对象，不需要使用Promise构造函数

$.when(ajaxRequest(), ajaxRequest())
.then(function(...results) {
  // do stuff with `results` array
})
.fail(function(jqxhr, textStatus, errorThrown) {
  console.error(errorThrown)
})