处理ajax请求的流控制（即仅在前一个请求完成后处理下一个请求）

时间：2015-05-21 09:15:12

标签： javascript ajax angularjs angular-promise

我编写了以下代码，但在下一个ajax调用$scope.sessionKey = data.result;传递之前我遇到了分配result.params.sSessionKey = $scope.sessionKey的问题（并且result.name=='get_session_key'评估了第一次迭代的循环）。正如你所看到的，我已经尝试过使用$q，但所有关于承诺和推迟的教程对我来说都没有任何意义（甚至像this这样的东西对我没有帮助）。

您能否告诉我如何循环angular.forEach(...并仅在前一个测试完成后执行下一个测试。

// Angular's implementation of JSON-RPC (as seen here > http://jsfiddle.net/89D4b/1/)
angular.module("JSON-RPC",[]).config([...]);

// Angular
var app = angular.module('testsApp', ['JSON-RPC']);
app.controller('testsCtrl', function($scope, $http, $q) {

    // populates the table on startup
    $http.get("functions_as_JSON.php")
    .success(function(response) {
        // store the data locally for angular to loop through
        $scope.data = response;

        // create a promise for the sessionKey
        var defer = $q.defer();
        var promise = defer.promise;
        promise.then(function(data){
            $scope.sessionKey = data.result;
        });

        //////////  AUTO RUN THE TESTS  //////////

        angular.forEach($scope.data.results,function(value,index){
            $scope.runTest(value);
        });
    });

    // test function
    $scope.runTest = function(result) {
        // (on all but the first test ...)
        // if the sessionKey is in the JSON put it in the params to send with the JSON-RPC
        if(result.params.sSessionKey) { result.params.sSessionKey = $scope.sessionKey; }
        // test the method
        $http.jsonrpc($scope.data.endPoint, result.method, result.params)
        .success(function(data, status, headers, config) {
            // if there are no errors
            if (data.error === null && !data.result.status) {
                // on the first test the sessionKey gets stored
                if(result.name=='get_session_key') {
                    $scope.sessionKey = data.result;
                    //defer.resolve(data);
                    //$scope.$evalAsync(function($scope) { $scope.sessionKey = data.result; });
                }
                $scope.testSuccess(result, data, status, headers, config);
            } else {
                $scope.testFailed(result, data, status, headers, config);
            }
        })
        .error(function(data, status, headers, config){ $scope.testFailed(result, data, status, headers, config); });
    }

    $scope.testSuccess = function(result, data, status, headers, config) {
        result.response = {'status':status, 'post':result.params, 'data':JSON.stringify(data)};
        result.status_class = 'positive';
        result.status = 'success';
    }

    $scope.testFailed = function(result, data, status, headers, config) {
        result.response = {'status':status, 'post':result.params, 'data':JSON.stringify(data)};
        result.status_class = 'negative';
        result.status = 'failed';
    }
});

修改

我已将其修改为以下但仍然无效

// Angular's implementation of JSON-RPC (as seen here > http://jsfiddle.net/89D4b/1/)
angular.module("JSON-RPC",[]).config([...]);

// Angular
var app = angular.module('testsApp', ['JSON-RPC']);
app.controller('testsCtrl', function($scope, $http, $q, $timeout) {

    // populates the table on startup
    $http.get("limesurvey_api_functions_as_JSON.php")
    .success(function(response) {
        // store the data locally for angular to loop through
        $scope.data = response;

        //////////  AUTO RUN THE TESTS  //////////

        var promiseArray = [];
        angular.forEach($scope.data.results,function(value,index){
            promiseArray.push($scope.runTest(value));
        });
        $q.all(promiseArray).then(function(){
            console.log("Angular is fun !!");
        });
    });

    // test function
    $scope.runTest = function(result){
        return { then: function(Resolve,Reject){
            // if the sessionKey has been set put it in the params
            if(result.params.sSessionKey) { result.params.sSessionKey = $scope.sessionKey; console.log($scope.sessionKey); }
            // test the method
            $http.jsonrpc($scope.data.endPoint, result.method, result.params)
            .success(function(data, status, headers, config) {
                // if there are no errors
                if (data.error === null && !data.result.status) {
                    // if it's the first test store the sessionKey
                    if(result.method=='get_session_key') {
                        $scope.sessionKey = data.result;
                        if ($scope.sessionKey == data.result) { Resolve(); }
                    } else {
                        Resolve();
                    }
                    $scope.testSuccess(result, data, status, headers, config);
                } else {
                    Reject();
                    $scope.testFailed(result, data, status, headers, config);
                }
            })
            .error(function(data, status, headers, config){
                Reject();
                $scope.testFailed(result, data, status, headers, config);
            });
        }}
    }

    $scope.testSuccess = function(result, data, status, headers, config) {
        ...
    }

    $scope.testFailed = function(result, data, status, headers, config) {
        ...
    }
});

编辑2

而且:( 

//////////  AUTO RUN THE TESTS  //////////

angular.forEach($scope.data.results,function(value,index){
    $scope.runTest(value).then(function(data) {
        if(result.method=='get_session_key') {
            // if it's the first test store the sessionKey
            $scope.sessionKey = data.result;
        }
    });
});

...

// test function
$scope.runTest = function(result){
    var deferred = $q.defer();
    // if the sessionKey has been set put it in the params
    if(result.params.sSessionKey) { result.params.sSessionKey = $scope.sessionKey; console.log($scope.sessionKey); }
    // test the method
    $http.jsonrpc($scope.data.endPoint, result.method, result.params)
    .success(function(data, status, headers, config) {
        // if there are no errors
        if (data.error === null && !data.result.status) {
            $scope.testSuccess(result, data, status, headers, config);
            deferred.resolve(data);
        } else {
            $scope.testFailed(result, data, status, headers, config);
            deferred.reject(data);
        }
    })
    .error(function(data, status, headers, config){
        $scope.testFailed(result, data, status, headers, config);
        deferred.reject(data);
    });
    return deferred.promise;
}

2 个答案:

答案 0 :(得分：1)

这并不像你制作它那么难。

根据您的评论进行编辑：

$http.get("functions_as_JSON.php")
.success(function(response) {
    $scope.data = response;
    $scope.sessionKey = data.result;
    var promiseArray = [];

    angular.forEach($scope.data.results,function(value,index){
        promiseArray.push($scope.runTestPromise(value));
    });
    $q.all(promises).then(function(){
        alert("Angular is fun !!");
    });
});

$scope.runTestPromise = function(data){
     return { then: function(Resolve,Reject){
     if (data == "valid data"){
         Resolve("valid data");
     } else {
         Reject("invalid data");
     }
}

我没有运行代码，但这是演习，你将测试包装在一个承诺中，然后你让$ q一个接一个地解决它们。

答案 1 :(得分：0)

对，我终于得到了这个：

// populates the table on startup
$http.get("functions_as_JSON.php")
.success(function(response) {
    // store the data locally for angular to loop through
    $scope.data = response;

    //////////  AUTO RUN THE TESTS  //////////

    var currentFunctionIndex = 0;
    function nextTest() {
        if (currentFunctionIndex < $scope.data.results.length) {
            $scope.runTest($scope.data.results[currentFunctionIndex++]).then(nextTest);
        }
    }
    nextTest();
});

...

// test function
$scope.runTest = function(result){
    var deferred = $q.defer();
    // if the sessionKey has been set put it in the params
    if(result.params.sSessionKey) { result.params.sSessionKey = $scope.sessionKey; }
    // test the method
    $http.jsonrpc($scope.data.endPoint, result.method, result.params)
    .success(function(data, status, headers, config) {
        // if there are no errors
        if (data.error === null && !data.result.status) {
            // if it's the first test store the sessionKey
            if(result.method=='get_session_key') {
                $scope.sessionKey = data.result;
            }
            $scope.testSuccess(result, data, status, headers, config);
            deferred.resolve();
        } else {
            $scope.testFailed(result, data, status, headers, config);
            deferred.reject();
        }
    })
    .error(function(data, status, headers, config){
        $scope.testFailed(result, data, status, headers, config);
        deferred.reject();
    });
    return deferred.promise;
}

我有点理解为什么会有效，但在我的脑海里，可以在文档中做更多的事情来解释这个问题（特别是在循环数据时）

相关问题
最新问题