javascript - $http 循环请求并在 Angularjs 中组装数据

Question

我有一段这样的源代码

var projectPromises = $http.get('http://myapi.com/api/v3/projects?private_token=abcde123456');

  $q.all([projectPromises]).then(function(data) {
    console.log(data);
    return data[0];
  }).then(function(projects) {
    var data = projects.data;
    var promises = [];
    var file = [];
    for(var i = 0; i < data.length; i++){
       var url = 'http://myapi.com/api/v3/projects/' + data[i].id + "/owner";
       promises.push($http.get(url));

    }

    console.log(promises);
    $q.all(promises).then(function(user) {
      console.log(user);
    }, function(error) {
      console.log("error here");
      console.log(error);
    });

让我解释一下我的源代码。

首先，我有第一个 API，它将返回项目列表，并将其分配给 projectPromises。获得项目列表后，每个项目都会包含一个项目 ID。我将遍历项目列表并触发相应的 http 请求以获取项目的所有者。

之后，我使用 Angular q 模块推迟 promise 列表并将列表记录到控制台

console.log(user);

这里不记录任何内容。我尝试打印错误，我知道原因是并非所有项目都包含用户列表。如果不是，它将返回 404 ，反之则返回 200 。所以 Promise 列表将包含从 API 返回的 200 和 404 对象，所以我认为当使用 q 延迟 Promise 时，如果对象是 404，它会抛出错误。但我不知道如何解决这个问题。

我的最终目的是获取每个项目的所有者，并将它们填充到一个数组中。

Answer 1

除非您有多个 Promise，否则无需使用 $q.all()。 $http.get() 返回一个 Promise，因此您只需对该 Promise 调用 .then 即可。

获得项目 ID 列表后，您可以将其映射到一组 Promise，每个 Promise 都有一个 .catch()，以便在各自的请求失败时提供后备值。

一旦你有了这个，你就可以在 Promise 数组上使用 $q.all() ，然后再使用 .then() ，你就准备好了.

var pProjects = $http.get('http://myapi.com/api/v3/projects?private_token=abcde123456');

pProjects
    .then(function (result) {
        // map the project IDs to an array of promises for each project's owner
        var pProjectOwners = result.data.map(function (proj) {
            return $http
               .get('http://myapi.com/api/v3/projects/' + proj.id + '/owner')
               .then(function (result) { return result.data; })
               // fallback value to use when a request fails
               .catch(function () { return 'no owner'; });
        });

        return $q.all(pProjectOwners);
    })
    .then(function (projectOwners) {
        console.log(projectOwners);
    })
    .catch(function (error) {
        console.error("something went wrong", error);
    });

这是一个替代版本，进行了一些重构，以分离出获取项目所有者的操作:

function getProjectOwner(projectId) {
    return $http
       .get('http://myapi.com/api/v3/projects/' + projectId + '/owner')
       .then(function (result) { return result.data; })
}

var pProjects = $http.get('http://myapi.com/api/v3/projects?private_token=abcde123456');

pProjects
    .then(function (result) {
        // map the project IDs to an array of promises for each project's owner
        var pProjectOwners = result.data.map(function (proj) {
            return getProjectOwner(proj.id)
               // fallback value to use when a request fails
               .catch(function () { return 'no owner'; });
        });

        return $q.all(pProjectOwners);
    })
    .then(function (projectOwners) {
        console.log(projectOwners);
    })
    .catch(function (error) {
        console.error("something went wrong", error);
    });