Javascript 操作后将$http请求返回到另一个请求

我似乎无法让它发挥作用，并真正开始影响我。这很简单

<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>

点击


显示更多
{{x.Name+'，'+x.Country}


函数customersController（$scope，$http）{
$scope.clickLoad=函数（）{
$http.get（“http://www.w3schools.com//website/Customers_JSON.php")
.成功（功能（响应）{
$scope.names=响应；
});
}
$scope.showMore=函数（n）{
$http.get（“http://www.w3schools.com//website/Customers_JSON.php")
.成功（功能（数据）{
$scope.next=数据
});
$scope.names.splice（n，0，$scope.next）；
}
}

---

我只想在第一个数组中返回一个新的$http请求（在某一点）。但我不知道如何简单地从第二个请求中以任何形式读取数据。。我一定是语法错了或是什么。

重构拼接，使其位于成功回调中

$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

，它仍然会完成当前函数，然后运行success，即使响应时间为0毫秒，这就是事件队列的工作方式

也就是说，

.success

按照您的方式运行，因此它需要位于success回调函数中

另外，将您的

ng repeat=“x in names”

更改为

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

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

更新

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

$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
}

使用：

---

您同时使用

$scope.next

和

$scope.next

。我想那不是你想做的。另外，我会将该拼接放在

success

函数中，因为http调用将运行aync，因此不能保证

$scope.next

在到达

拼接时设置。我确实尝试将拼接放在.get中。还是不行。我不知道如何简单地显示请求的结果或数据。@DanCzarnik，我在上面添加了一些日志记录，你能告诉我每个日志的结果吗？另外，在代码中为repeat$scope.showMore=函数（n）{$http.get（“）.success（函数（响应）{$scope.names.splice（n+1,0，{Name:'John'，Country:'Doe}）添加'track by$index'）；}）；}我希望它像这样运行，我就是无法得到返回的结果..你说的“返回”是什么意思？你想把结果存储在某个地方吗？
// 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); 
});