angular根据第一个请求的数据做第二个http请求

Question

通过第一个点击事件获取第一个接口数据，再通过第二个接口获取第二个接口数据。我用的嵌套，只能获取到第一个的数据。听说promise可以解决，我查找了很多但是都不太能理解，求大神给个详细实例（）

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

app.controller('kmsCtrl', function ($scope, $http) {
    $scope.send = function () {
        var s = $scope.choice;
        var n = $scope.num;
        $http({
            method: 'JSONP',
            url: "http://192.168.18.27:8080/kmx/getWorkCond?type=" + s + "&data=" + n
        }).then(function successfulCallback(response) {
            $scope.gk = response.data.data;
            console.log(response.data);

           $scope.sendo = function () {
             $http({
                    method: 'JSONP',
                    url: 'http://192.168.18.27:8080/kmx/getDatas?deviceIds=(设备id)&sensorNames=&start=&end='
                }).then(function successfulCallback(response) {
                    $scope.d = response.data["0001130667"].TY_0001_00_6;
                    console.log(response.data["0001130667"])
                }, function errorCallback(err) {

                });
            };
        }, function errorCallback(err) {

        });

}

Answer 1

如果获取第一个接口的数据只是为了进行获取第二个接口数据，那么我建议你在服务端将接口整合成一个接口，返回合适的数据即可。

如果必须存在嵌套异步的话，可以看下promise知识，比如：https://segmentfault.com/a/11...

Answer 2

app.controller('kmsCtrl', function ($scope, $http, $q) {
$scope.send = function () {
        var deferred = $q.defer();
        var s = $scope.choice;
        var n = $scope.num;
        $http({
            method: 'JSONP',
            url: "http://192.168.18.27:8080/kmx/getWorkCond?type=" + s + "&data=" + n
        }).then(function successfulCallback(response) {
            $scope.gk = response.data.data;
            console.log(response.data);
            deferred.resolve();

        }, function errorCallback(err) {

        });
        return deferred.promise;
     };
     $scope.send().then(function(){
      $http({
            method: 'JSONP',
            url: 'http://192.168.18.27:8080/kmx/getDatas?deviceIds=(设备id)&sensorNames=&start=&end='
        }).then(function successfulCallback(response) {
            $scope.d = response.data["0001130667"].TY_0001_00_6;
            console.log(response.data["0001130667"])
        }, function errorCallback(err) {

        });
     });
});

别忘了注入$q服务。

Answer 3

我一般都这么写 把请求后台单独写一个方法 然后嵌套调用

        $scope.getReport = function(path,data,method,successfn){
                    $http({
                            method: method, 
                            dataType:"json",
                            url: path,
                            data:data,
                            headers: {
                                'Content-Type': 'application/json',
                             }
                     
                        }).
                        success(function(data) {
                            console.log(data)
                            successfn(data);                              
                        }).
                        error(function(data, status) {
                            console.log(data.msg);
                            console.log(data)
                        });
                
            }            

        $scope.getReport(url,'','get',function(data){
            $scope.getReport(url2,data,'post',function(data){
            //do something
            })
        })