javascript - 来自 Angular 的 Restful 调用不返回结果

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');
             });
  }     });   

在上面的应用程序中，第一个函数返回结果，而第二个函数则不返回结果。

在 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。根据 https://stackoverflow.com/a/24893912/146656 在这种情况下 AngularJS 返回 404