带有 id 的 Angularjs api 调用

Question

所以我开始使用 Angular 并且我已经进行了一个成功的 api 调用，它返回具有名称和 url 的对象。要获取对象的详细信息，我需要执行另一个 api 调用，其中包含对象的 id。我不知道该怎么做。

这是我的服务，用于对对象的详细信息进行 api 调用。 ':id' 是对象的 id 必须放在 api 链接中的位置

app.factory('pokemonDetails', ['$http', function($http) {
return $http.get('http://pokeapi.co/api/v2/pokemon/:id')
    .success(function(data) {
        return data;
    })
    .error(function(err) {
        return err;
    });
}]);

我不确定我是否清楚地解释了这一点。

当我转到我的网址“/pokemon/1”时，api 必须调用“http://pokeapi.co/api/v2/pokemon/1”。

如果我转到我的 url '/pokemon/2'，api 必须调用 'http://pokeapi.co/api/v2/pokemon/2' 等等..

（我不确定是否需要分享我的代码的其他部分，如果我确实告诉我，我会添加它们。）

Answer 1

这是angular's $resource service 的一个很好的用例，如果您想使用它。

var Pokemon = $resource('http://pokeapi.co/api/v2/pokemon/:id', {id:'@id'});
var thisPokemon = Pokemon.get({id:1}, function() {
  /* whatever you want to do after you get the details back */
});

$resource 是一种速记，允许您对 API 资源进行标准（和自定义）CRUD 操作调用。

Answer 2

定义一个有参数的函数。

app.factory('pokemonDetails', ['$http', function($http) {
     function httpPromise(id) {
         return $http.get('http://pokeapi.co/api/v2/pokemon/'+id);
     }
     //return function
     return httpPromise
}]);

然后在您的客户端代码中使用它。

$scope.details=[];
for (var id=0; id < someNumber; id++) {
    pokemanDetails(id).then( function onFulfilled(response) {
        $scope.details[id] = response.data;
    }).catch ( function onRejected (response) {
        console.log ( response.status );
    });
};

关键是将参数传递给函数。

---

弃用通知

$http 旧承诺方法 .success 和 .error 已被弃用。请改用标准的.then 方法。¹