javascript - 在执行操作后将 $http 请求返回到另一个请求

Question

我似乎无法让它发挥作用并且真正开始困扰我。非常简单。

<div ng-app="" ng-controller="customersController">
    <button ng-click="clickLoad()">click</button>
    <ul>
        <li ng-repeat="x in names">
            <button ng-click="showMore($index)">show more</button>
            {{ x.Name + ', ' + x.Country }}
        </li>
    </ul>
</div>

<script>
function customersController($scope, $http) {

    $scope.clickLoad = function() {
        $http.get("http://www.w3schools.com//website/Customers_JSON.php")
            .success(function(response) {
                $scope.names = response;
            });
    }


    $scope.showMore = function(n) {

        $http.get("http://www.w3schools.com//website/Customers_JSON.php")
            .success(function(data) {
                $scope.next = data
            });

        $scope.names.splice(n, 0, $scope.$next);

    }
}
</script>

我只想将新的 $http 请求返回到第一个数组中(在某个时刻)。但我不知道如何简单地以任何形状或形式从第二个请求中读取数据。我一定是语法错误或其他问题。

Answer 1

将拼接重构到成功回调内部

$scope.showMore = function(n) {

    $http.get("http://www.w3schools.com//website/Customers_JSON.php")
        .success(function(data) {
            // log the data
            $scope.next = data;
            console.log('data that comes back', data); // what comes back in data?

            // try splice
            $scope.names.splice(n, 0, $scope.$next);
            console.log('after splice', $scope.names);

            // try concat instead?
            $scope.names.concat(data);
            console.log('after concat', $scope.names);
        });
}

您可以将其视为超时，即使您在 .success 之后声明 .splice，它仍然会完成当前函数，然后运行成功，即使如果您的响应时间是 0 毫秒，这就是事件队列的工作原理。

意思是，.success按照您的方式在.splice之后运行，因此它需要位于成功回调函数内。

另外，将 ng-repeat="x in names" 更改为

ng-repeat="x in names track by $index"

由于重复，代码可能会中断。

更新

就“返回”某些内容而言，您拥有的函数返回一个 promise ，因此您需要像访问任何异步任务一样使用回调或 promise 链来访问它。

$scope.showMore = function(n) {
    var deferred = $q.defer(); // a deferred object; a unit of work to be done which has callbacks
    $http.get("w3schools.com//website/Customers_JSON.php").then(function(successResponse) { // you can use .then instead of success
        var data = successResponse.data;
        console.log('success response data:', data);
        $scope.names.splice(n + 1, 0, {
            Name: 'John',
            Country: 'Doe'
        });
        deferred.resolve(successResponse); // mark as successful, pass in response as part of resolution. You can replace successResponse with any other data you want, like $scope.names and it will be available in the next step of the promise chain
    }, function(errorResponse){
        var data = errorResponse.data;
        console.log('error response data:', data);
        deferred.reject(errorResponse); // mark as failed, pass in error response which came from server
    });
    return deferred.promise; // return a promise
}

用途:

// this function will do all processing above and then continue with this one below.
$scope.showMore().then(function(successfulResponse){ // show more will return a promise
    console.log('successfulResponse', successfulResponse); 
}, function(errorResp){
    console.log('errorResp', errorResp); 
});