在angularjs中的控制器内部调用multipe$http

multipe $http calls inside a controller in angularjs

本文关键字:调用 multipe http 内部 控制器 angularjs      更新时间:2023-12-06

我正在尝试在angularJS中实现wego API。我面临的问题是,为了获得酒店列表,我需要进行三次API调用,每次调用的结果都会给出一些信息,这些信息需要传递到下一次API调用。我面临的问题是,我能够成功拨打第一个电话,但无法继续。我尝试使用console.log,发现在进行第二次API调用后,执行既不会进入成功回调,也不会进入错误回调。这是我的代码:-

var app = angular.module('tripochill', []);
app.controller('MainCtrl', function($scope, $http, $log) {
  $scope.city = "";
  $scope.ts_code = #####;
  $scope.key = ##########;
  $("#from").on("change", function() {
    $scope.checkin = $(this).val();
    console.log($scope.checkin);
    chk = $scope.checkin;
    day = chk.substr(0, 2);
    mon = chk.substr(3, 2);
    yr = chk.substr(6);
    $scope.checkin = (yr + "-" + day + "-" + mon);
    console.log($scope.checkin);
  });

  $("#to").on("change", function() {
    $scope.checkout = $(this).val();
    console.log($scope.checkout);
    chk = $scope.checkout;
    day = chk.substr(0, 2);
    mon = chk.substr(3, 2);
    yr = chk.substr(6);
    $scope.checkout = (yr + "-" + day + "-" + mon);
    console.log($scope.checkout);
  });
  console.log($scope.city[0]);
  $scope.cityNames = function() {
    $http.get("http://api.wego.com/hotels/api/locations/search?q=" + $scope.city[0] + "&ts_code=" + $scope.ts_code + "&key=" + $scope.key)
      .then(onSuccessName, onErrorName);
  };
  //Success method
  var onSuccessName = function(response) {
    $scope.count = response.data.count;
    console.log($scope.count);
    var count = 0;
    for (var i = 0; i < $scope.count; i++) {
      if (response.data.country_name == city[2]) {
        count = i;
        break;
      }
    }
    console.log(count);
    console.log(response.data.locations[count].id);
    id = response.data.locations[count];
    $scope.id = id.id;
    $scope.searchid = function() {
      console.log("hahahahaha");
      $http.get("http://api.wego.com/hotels/api/search/new?location_id=" + $scope.id + "&check_in=" + $scope.checkin + "&check_out=" + $scope.checkout + "&user_ip=direct&ts_code=" + $scope.ts_code + "&key=" + $scope.key)
        .then(onSuccessSearch, onErrorSearch);
    };
    var onSuccessSearch = function(response) {
      console.log("2");
      console.log(response.data);
      $scope.search_id = response.data;
    };
    var onErrorSearch = function(response) {
      console.log("here!!!");
      $log.info(response);
      $scope.info = "Could not retrieve data";
    };
  };
  //Error method
  var onErrorName = function(response) {
    $log.info(response);
    $scope.info = "Could not retrieve data";
  };
  /*function hotels(search_id){
    $scope.hotelList = function () {
          $http.get("http://api.wego.com/hotels/api/search/"+search_id+"&ts_code="
              +$scope.ts_code+"&key="+$scope.key)
        .then(onSuccessList, onErrorList);
      };
      var onSuccessList = function (response) {
          $scope.hotels = response.data;
          console.log($scope.hotels);
      };
      var onErrorList = function (response) {
          $log.info(response);
          $scope.info = "Could not retrieve data";
      };
  }*/
});
app.controller('SecondCtrl', function($scope) {
});

因为您没有从任何地方调用$scope.searchid。所以你需要称之为

$scope.searchid = function () {
   console.log("hahahahaha");
   $http.get("http://api.wego.com/hotels/api/search/new?location_id="+$scope.id+"&check_in="
                +$scope.checkin+"&check_out="+$scope.checkout+"&user_ip=direct&ts_code="+$scope.ts_code
                +"&key="+$scope.key)
        .then(onSuccessSearch, onErrorSearch);
};
$scope.searchid(); // add this line in your code
var onSuccessSearch = function (response) {
     console.log("2");
     console.log(response.data);
     $scope.search_id = response.data;
};

我看到$scope.searchid从未被调用,请尝试调用$scope.searchid()来启动第二个api调用。