javascript - 如何确定所有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.
})