AngularJS - 在 while 循环中从缓存发送和删除 JSON 数据时出现奇怪的错误?

AngularJS - Weird error with sending and deleting JSON data from cache in while loop?

循环表现异常,警报乱序发射并且 JSON 数据在同一时间发送。我根本不明白为什么会这样。我已经为此苦苦挣扎了太久,任何帮助都将不胜感激!

提交 3 个缓存的 JSON 个对象,顺序为:

警报"should be second"
警报 "should be second"
警报 "should be second"
警报“{@xmlns:ns3”:"url}"
警报 "should be first"
警报“0posted”

然后成功地将所有三个JSON对象同时发送到数据库。 cachePostCount 现在设置为零

app.controller('FormCtrl', function($scope, $filter, $window, getData, Post, randomString) {
  // Get all posts
  $scope.posts = Post.query();

  // Our form data for creating a new post with ng-model
  $scope.postData = {};
    $scope.$on('updateImage', function () {
        $scope.postData.attachment = getData.image;
    });
    $scope.postData.userid = "Mango Farmer";
    $scope.postData.uuid = randomString(32); //$scope.genUUID();
    $scope.$on('updateGPS', function () {
        $scope.postData.gps = getData.gps;
    });
    $scope.postData.devicedate = $filter('date')(new Date(),'yyyy-MM-dd HH:mm:ss');

  $scope.newPost = function() {
    var post = new Post($scope.postData);

    var postCount = window.localStorage.getItem("cachedPostCount");

    if(typeof postCount == 'undefined' || postCount == null){
            postCount = 1;
            window.localStorage.setItem("cachedPostCount", postCount);
        }
        else {
            postCount ++;
            window.localStorage.setItem("cachedPostCount", postCount);
        }

    window.localStorage.setItem("post" + postCount, JSON.stringify(post));

    while (postCount > 0) { 

        var curCacheObj = new Post(JSON.parse(window.localStorage.getItem("post" + postCount) || '{}'));

        curCacheObj.$save().then(function(response) {
                var servResponse = JSON.stringify(response);
                alert(servResponse);
                if (servResponse.indexOf("@xmlns:ns3") > -1) {
                    alert("should be first");
                    window.localStorage.removeItem("post" + postCount);
                    alert(window.localStorage.getItem("cachedPostCount") + "posted");
                    $window.location.href = 'success.html';
                }
                else {
                    alert("Unable to post at this time!");
                }
            });

        alert("should be second");
        postCount --;
        window.localStorage.setItem("cachedPostCount", postCount);
    }
};

$save() 是一个异步操作,保证在事件循环中的下一个滴答之前不会发生,它将在 alert("should be second"); 发生之后发生.您应该将依赖于该顺序的此警报(以及任何其他逻辑)放在 then() 函数内或链上另一个 then() 函数并将其放在那里,如下所示:

    curCacheObj.$save().then(function(response) {
            var servResponse = JSON.stringify(response);
            alert(servResponse);
            if (servResponse.indexOf("@xmlns:ns3") > -1) {
                alert("should be first");
                window.localStorage.removeItem("post" + postCount);
                alert(window.localStorage.getItem("cachedPostCount") + "posted");
                $window.location.href = 'success.html';
            }
            else {
                alert("Unable to post at this time!");
            }
        }).then(function() {
            alert("should be second");
            postCount --;
            window.localStorage.setItem("cachedPostCount", postCount);
        });

问题是 .$save() 不喜欢 while 循环(可能因为它是前面提到的异步函数)。我使用 if 语句重新创建了一个函数的 while 循环的效果,如果缓存的 postCount 仍然有数据,它将再次触发该函数,如下所示:

$scope.submitAndClearCache = function() {

        var postCount = window.localStorage.getItem("localPostCount");
        var curCacheObj = new Post(JSON.parse(window.localStorage.getItem("post" + postCount) || '{}'));

        if (postCount != 0) {
            curCacheObj.$save().then(function(response) {
                    alert(response);
                    alert("Post " + postCount + " sent!");
                }).then(function() {
                postCount --;
                window.localStorage.setItem("localPostCount", postCount);
                postCount = window.localStorage.getItem("localPostCount");
                $scope.submitAndClearCache();
            });
        }
    };

    $scope.addCachePost = function() {
        var frmData = new Post($scope.postData);
        var postCount = window.localStorage.getItem("localPostCount");
        postCount ++;

        window.localStorage.setItem("localPostCount", postCount);
        window.localStorage.setItem("post" + postCount, JSON.stringify(frmData));
    };

这项技术有效,只是看起来很奇怪。