Javascript 处理异步代码以组合多个返回的响应_Javascript_Jquery_Callback_Promise

Javascript 处理异步代码以组合多个返回的响应

javascript jquery

Javascript 处理异步代码以组合多个返回的响应,javascript,jquery,callback,promise,Javascript,Jquery,Callback,Promise,我正在编写一些查询GithubAPI的异步代码。我正在进行的每个API调用都会通过这段代码运行，我会点击“weeksOfYear”控制台日志。我试图做的是将所有这些api调用捆绑到一个大数组中，这样我就可以一起处理所有数据。我相信这会涉及回调，但我不确定该放在哪里。我在下面包含了我的代码我相信它正以这种方式回归，因为这一切都在一个承诺之内。当我尝试向代码中添加另一个承诺时，我会得到一个错误，该错误表示“then is undefined”。这是因为我需要返回一个承诺对象。因此，我认为解决办法是

我正在编写一些查询GithubAPI的异步代码。我正在进行的每个API调用都会通过这段代码运行，我会点击“weeksOfYear”控制台日志。我试图做的是将所有这些api调用捆绑到一个大数组中，这样我就可以一起处理所有数据。我相信这会涉及回调，但我不确定该放在哪里。我在下面包含了我的代码

我相信它正以这种方式回归，因为这一切都在一个承诺之内。当我尝试向代码中添加另一个承诺时，我会得到一个错误，该错误表示“then is undefined”。这是因为我需要返回一个承诺对象。因此，我认为解决办法是使用回调

谢谢

$.ajax({
  method: 'GET',
  url: 'https://api.github.com/orgs/lodash/repos' ,
  contentType: 'application/json',
  beforeSend: function(xhr){
      return xhr.setRequestHeader("Authorization", "token adbfde986475bbee66b2e22b4375be4d34adc098")
    }
})
.then(function (data){
  // console.log('GOT THIS DATA', data);
  return data.map(function(val){
      return val.name;
    });
})
.then(function (newData){
  newData.forEach(function(repoName){
    pagination(repoName, function(storage) {
      storage = storage.filter(function(PR){
        if(PR.merged_at !== null){
          return true;
           }
        })
        var weeksOfYear = {};
        console.log('STORAGE HERE IS', storage);
        storage.filter(function(mergedPR){
          if (moment(mergedPR.merged_at).year() === 2016){
            return true;
          }
        }).forEach(function(mergedPR){
          var weekMerged = moment(mergedPR.merged_at).week();
            if(!weeksOfYear[weekMerged]){
              weeksOfYear[weekMerged] = 1;
              // weeksOfYear[yearMerged] = yearMerged
            }else{
              weeksOfYear[weekMerged] += 1;
              // weeksOfYear[moment(mergedPR.merged_at).year()] = moment(mergedPR.merged_at).year()
            }
          })
          console.log('weeks of Year are', weeksOfYear)
        })
      })
    })

分页看起来是这样的：

var pagination = function (repoName, callback) {
      var num = 1;
      var storage = [];
      function recursiveHelper(repoName, num){
         $.ajax({
        method: 'GET',
        url: 'https://api.github.com/repos/lodash/' + repoName + '/pulls?state=closed&page=' + num,
        contentType: 'application/json',
        beforeSend: function(xhr){
          return xhr.setRequestHeader("Authorization", "token adbfde986475bbee66b2e22b4375be4d34adc098")
        }
      })
      .then(function(numPullRequests){
        // console.log('numPullRequests', numPullRequests);
        storage = storage.concat(numPullRequests);
        if(numPullRequests.length !== 30){
          return callback(storage);
        }

        recursiveHelper(repoName, num + 1);
      })
        // console.log('this value is', numPullRequests);
      }

      recursiveHelper(repoName, num)

}

好的，由于分页是异步的，并且不会返回承诺（即使它使用承诺！但它的递归特性使它成为现实），所以对现有代码的最小更改会产生这样的结果

...
.then(function(newData) {
    // use Array#map and Promise.all ...
    return Promise.all(newData.map(function(repoName) {
        // create a Promise
        return new Promise(function(resolve, reject) {
            pagination(repoName, function(storage) {
                storage = storage.filter(function(PR) {
                    if (PR.merged_at !== null) {
                        return true;
                    }
                })
                var weeksOfYear = {};
                console.log('STORAGE HERE IS', storage);
                storage.filter(function(mergedPR) {
                    if (moment(mergedPR.merged_at).year() === 2016) {
                        return true;
                    }
                }).forEach(function(mergedPR) {
                    var weekMerged = moment(mergedPR.merged_at).week();
                    if (!weeksOfYear[weekMerged]) {
                        weeksOfYear[weekMerged] = 1;
                        // weeksOfYear[yearMerged] = yearMerged
                    } else {
                        weeksOfYear[weekMerged] += 1;
                        // weeksOfYear[moment(mergedPR.merged_at).year()] = moment(mergedPR.merged_at).year()
                    }
                });
                console.log('weeks of Year are', weeksOfYear);
                // resolve the promise in the callback
                resolve(weeksOfYear);
            });
        });
    }));
}).then(function(result) {
    // results is an array of weeksOfYear
});

但是，如果您更改

分页

以返回承诺，如下所示

您的代码可以更改为

...
.then(function(newData) {
    // again, use Array#map and Promise.all
    return Promise.all(newData.map(function(repoName) {
        // no need for new Promise as pagination returns a promise
        return pagination(repoName)
        .then(function(storage) {
            storage = storage.filter(function(PR) {
                if (PR.merged_at !== null) {
                    return true;
                }
            })
            var weeksOfYear = {};
            console.log('STORAGE HERE IS', storage);
            storage.filter(function(mergedPR) {
                if (moment(mergedPR.merged_at).year() === 2016) {
                    return true;
                }
            }).forEach(function(mergedPR) {
                var weekMerged = moment(mergedPR.merged_at).week();
                if (!weeksOfYear[weekMerged]) {
                    weeksOfYear[weekMerged] = 1;
                    // weeksOfYear[yearMerged] = yearMerged
                } else {
                    weeksOfYear[weekMerged] += 1;
                    // weeksOfYear[moment(mergedPR.merged_at).year()] = moment(mergedPR.merged_at).year()
                }
            });
            console.log('weeks of Year are', weeksOfYear);
            // just return weeksOfYear
            return weeksOfYear;
        });
    }));
}).then(function(result) {
    // results is an array of weeksOfYear
});

注意：如果您没有可用的承诺

替换

return Promise.all(newData.map(function(repoName) {

与

及

与

对于第一个答案，您还需要更改

 return new Promise(function(resolve, reject) {
    pagination(repoName, function(storage) {
        //... snip
        console.log('weeks of Year are', weeksOfYear);
        // resolve the promise in the callback
        resolve(weeksOfYear);
    });
 });

到

pagination（repoName，function（storage）{

是一个异步函数吗？当你说

bundle所有这些api调用时，哪个“api调用”你是说，因为唯一看起来像api调用的函数是pagination
是的，它太大了，无法粘贴到注释中，很遗憾，它不断地调用github api来收集不同的拉取请求（一次最多可以检索30个，然后将它们合并到一个数组中。我已经添加了我的其余代码，我希望这能澄清问题。这听起来像是Promise.all
的工作。你可以建立一个承诺数组，并将它们传递给Promise.all
。函数传递给then
Promise.al的块l
将收到一系列关于单个承诺的结果。很抱歉，如果您测试了第二个代码，但它坏了，我在错误的位置返回了承诺。如果可用，all（）
肯定会工作，但没有证据表明它是。我们所知道的只是jQuery
…因此jQuery.when（）
。注意：添加了使用$的更改。非常感谢！这是一个很好的答案：）
return $.when.apply($, newData.map(function(repoName) {

}).then(function(result) {
    // results is an array of weeksOfYear
});

}).then(function() {
    // arguments will be weeksOfYear
});

 return new Promise(function(resolve, reject) {
    pagination(repoName, function(storage) {
        //... snip
        console.log('weeks of Year are', weeksOfYear);
        // resolve the promise in the callback
        resolve(weeksOfYear);
    });
 });

var d = $.Deffered();
pagination(repoName, function(storage) {
     //... snip
     console.log('weeks of Year are', weeksOfYear);
     // resolve the promise in the callback
     d.resolve(weeksOfYear);
});
return d.promise();