Question

这里尝试对外部API进行RESTful调用。我试图在一个电话中实现两件事。所以，我有一个功能，其中包含2个嵌套函数。第一个调用搜索API来搜索产品。第二个调用推荐的API来根据第一个结果检索推荐。

我的AngularJS代码如下;

 var walmartAssn= angular.module('myApp', ['ngResource']);

 walmartAssn.controller('walmartAssnController', function($scope,$resource) {
//define the API urls        
var urlSearchProductApi= 'http://api.walmartlabs.com/v1/search';
var urlRecProductApi='http://api.walmartlabs.com/v1/nbp';
//define API key
var keyApi='exampleKey123';

$scope.searchProductMethod= function(){
    //pass the value from the user input text box
    $scope.searchItem = $scope.item ;
               $scope.productId;
              //get the data from the Walmart product search API
              searchRequest = $resource(urlSearchProductApi, { callback: 
              "JSON_CALLBACK" }, { get: { method: "JSONP" }});

              //pass the input text as a parameter through a GET request
              $scope.searchedProducts = searchRequest.get({ apiKey: keyApi, 
              query: $scope.searchItem });

              console.log($scope.searchedProducts.$promise);
              $scope.searchedProducts.$promise.then(function(eventDetail){

                //fetch the ID of the first item
               $scope.productId = eventDetail.items[0].itemId;
              }); 

              recommendRequest = $resource(urlRecProductApi, { callback:    
              "JSON_CALLBACK" }, { get: { method: "JSONP" , isArray:true}});
              console.log(recommendRequest);

              $scope.recommendedProducts = recommendRequest.get({ apiKey: 
              keyApi, itemId: 42608121 });
              console.log($scope.recommendedProducts)
              $scope.recommendedProducts.$promise.then(function(){

                  $scope.recommendedProductsList = eventDetail;
                  console.log("Print recommended list");
                  console.log(eventDetail);
                  console.log($scope.recommendedProductsList);
                  console.log('End');
             });
  }     });

在上面的app中，第一个函数返回结果，而第二个函数没有。

在chrome控制台中我得到以下内容，而不是第一个函数返回JSON数组，而第二个函数被阻止。

在Chrome控制台的“网络”标签上，我看到呼叫成功，如下所示;

此外，我已在浏览器中尝试使用硬编码值的URL并成功运行。

提前感谢任何帮助。

Answer 1

假设第二个调用不依赖于第一个调用，我看到你没有将eventDetail定义为第二个方法的参数。

所以，而不是：

$scope.recommendedProducts.$promise.then(function(){

这将是：

$scope.recommendedProducts.$promise.then(function(eventDetail){

如果您实际上是要使用第一种方法（eventDetail使用的方法）中的$scope.searchedProducts.$promise，则需要从第一个then处理程序调用整个第二个请求代码，传递所需的数据。

类似的东西：

var walmartAssn= angular.module('myApp', ['ngResource']);

walmartAssn.controller('walmartAssnController', function($scope,$resource) {
    //define the API urls        
    var urlSearchProductApi= 'http://api.walmartlabs.com/v1/search';
    var urlRecProductApi='http://api.walmartlabs.com/v1/nbp';
    //define API key
    var keyApi='exampleKey123';


    $scope.recommend = function(itemId) {
        var recommendRequest = $resource(urlRecProductApi, { callback:    
        "JSON_CALLBACK" }, { get: { method: "JSONP" , isArray:true}});
        console.log(recommendRequest);

        $scope.recommendedProducts = recommendRequest.get({ apiKey: 
        keyApi, itemId: itemId });
        console.log($scope.recommendedProducts);

        $scope.recommendedProducts.$promise.then(function(eventDetail){
            $scope.recommendedProductsList = eventDetail.items; // or just `eventDetail`?
            console.log("Print recommended list");
            console.log(eventDetail);
            console.log($scope.recommendedProductsList);
            console.log('End');
        });
    };

    $scope.searchProductMethod= function(){
        //pass the value from the user input text box
        $scope.searchItem = $scope.item ;
        $scope.productId;
        //get the data from the Walmart product search API
        var searchRequest = $resource(urlSearchProductApi, { callback: 
        "JSON_CALLBACK" }, { get: { method: "JSONP" }});

        //pass the input text as a parameter through a GET request
        $scope.searchedProducts = searchRequest.get({ apiKey: keyApi, 
        query: $scope.searchItem });

        console.log($scope.searchedProducts.$promise);
        $scope.searchedProducts.$promise.then(function(eventDetail){
            //fetch the ID of the first item
            $scope.productId = eventDetail.items[0].itemId;
            $scope.recommend($scope.productId);
        }); 

    };
});

还有一件事：

为什么isArray:true仅用于推荐但不用于搜索？

<强>更新

尝试jQuery JSONP调用以查看它是否有效可能是值得的。也许推荐端点不支持JSONP。根据{{3}}

，AngularJS在这种情况下返回404

来自angular的宁静调用不会返回结果

1 个答案: