Angularjs异步问题逻辑处理方法

最新推荐文章于 2021-06-07 14:11:22 发布

weixin_33871366

最新推荐文章于 2021-06-07 14:11:22 发布

阅读量127

点赞数

文章标签： python json

原文链接：https://my.oschina.net/Nealyang/blog/533304

版权

2019独角兽企业重金招聘Python工程师标准>>>

项目上一定是学习新知识最好的办法，而遇到问题解决问题，在到出现新的问题。。。周而复始最终解决问题，我觉得这是一个认知的过程。
说下在富瑞项目上遇到的这个问题吧：
1、接口要求的数据是这个样子的：

{
        "object_id": "0020000654",
        "fare_items":[
           {
             "fare_type": "1&快递费",
             "fare_amount": "41",
             "fare_picture_url": "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=536487144,1692626227&fm=58"
            },
            {
             "fare_type": "1&快递费",
             "fare_amount": "42",
             "fare_picture_url": "https://ss0.baidu.com/6ONWsjip0QIZ8tyhnq/it/u=536487144,1692626227&fm=58"
           }
         ]
        }

其中fire_items是一个数组，看似非常容易，只要往里面push就可以了，但是其中fare_picture_url是调另一个接口上传完成以后返回过来的（注意这里面的上传必然是异步的，当然问题也就出在了异步这里）
我先用一个items数组来存fare_items需要的数据，然后for循环去push，判断fare_picture_url是否有值，有则上传，然后在push，没有则直接拿另外两个值去push，最后在一并上传，看似没有问题，但是当没有存在图片的时候都是可以成功的，有图片的时候，每次上传到服务器中的数据都没有这个有图片的数组值。
各种处理各种尝试，没有采用angularjs封装好的异步处理方法，用逻辑去判断搞定的，探索的过程这里就不赘述了，说下最终的解决方案吧：

1、将最终的提交封装成一个方法（之前我是写在上传成功的回调函数里面的）function postFu() {

    if (param.fare_items.length == $scope.items.length) {

           }

}

对，其中的if判断很重要

2、这一点很重要，上传成功后的回调函数不能够写在方法里面，

workOrderFactory.upLoad($scope.items[i].imgSrc, tempParam, function(success){
    
}, error);
这样写success函数在成功了以后执行，但是不能执行外面的变量，之前我这里的处理全部变量的语句，一到这里就直接停止了，不再执行下去，这一点困扰了我好久，最终也没有找到解决方案。最终的处理方法是这样子的var success = function (success) {
    var i = acount;
    if ($scope.items[i].fareType == "快递费") {
        feiyong = "1&" + $scope.items[i].fareType;
    }else if…
else if ($scope.items[i].fareType == "服务商劳动费") {
        feiyong = "16&" + $scope.items[i].fareType;
    }
    tempArritem.fare_type = feiyong;
    tempArritem.fare_amount = $scope.items[i].fareAmount;
    tempArritem.fare_picture_url = JSON.parse(success.response).access_url;
    param.fare_items.push(tempArritem);
    tempArritem = {"fare_type": "", "fare_amount": "", "fare_picture_url": ""};
    postFu();
};

注意上面的额var i = account;

看下这个for循环就明白了for (var i = 0; i < $scope.items.length; i++) {
    acount = i;
    if ($scope.items[i].imgSrc == null || $scope.items[i].imgSrc == undefined || $scope.items[i].imgSrc == "") {
        if ($scope.items[i].fareType == "快递费") {
            feiyong = "1&" + $scope.items[i].fareType;
        } else if ($scope.items[i].fareType == "招待费-工单") {
            feiyong = "2&" + $scope.items[i].fareType;
        } else if ($scope.items[i].fareType == "里程费") {
            feiyong = "3&" + $scope.items[i].fareType;
        } else if ($scope.items[i].fareType == "里程津贴费") {
            feiyong = "4&" + $scope.items[i].fareType;
        } else if ($scope.items[i].fareType == "通讯费") {
            feiyong = "5&" + $scope.items[i].fareType;
        } else if ($scope.items[i].fareType == "服务商垫用费") {
            feiyong = "6&" + $scope.items[i].fareType;
        } else if ($scope.items[i].fareType == "差旅费-飞机车船费") {
            feiyong = "7&" + $scope.items[i].fareType;
        } else if ($scope.items[i].fareType == "差旅费-住宿费") {
            feiyong = "8&" + $scope.items[i].fareType;
        } else if ($scope.items[i].fareType == "差旅费-误餐补贴") {
            feiyong = "9&" + $scope.items[i].fareType;
        } else if ($scope.items[i].fareType == "差旅费-市内交通费") {
            feiyong = "10&" + $scope.items[i].fareType;
        } else if ($scope.items[i].fareType == "差旅费-通讯补贴") {
            feiyong = "11&" + $scope.items[i].fareType;
        } else if ($scope.items[i].fareType == "取款手续费") {
            feiyong = "12&" + $scope.items[i].fareType;
        } else if ($scope.items[i].fareType == "客户索赔费") {
            feiyong = "13&" + $scope.items[i].fareType;
        } else if ($scope.items[i].fareType == "职工薪酬-夜间津贴费") {
            feiyong = "14&" + $scope.items[i].fareType;
        } else if ($scope.items[i].fareType == "夜间津贴费") {
            feiyong = "15&" + $scope.items[i].fareType;
        } else if ($scope.items[i].fareType == "服务商劳动费") {
            feiyong = "16&" + $scope.items[i].fareType;
        }
        if (feiyong == "") {
            showAlert('提示', '费用类型出错');
            return;
        }
        tempArritem.fare_type = feiyong;
        tempArritem.fare_amount = $scope.items[i].fareAmount;
        tempArritem.fare_picture_url = "";
        param.fare_items.push(tempArritem);
        tempArritem = {"fare_type": "", "fare_amount": "", "fare_picture_url": ""};
        postFu();
    } else {
        workOrderFactory.upLoad($scope.items[i].imgSrc, tempParam, success, error);
    }

还是刚刚说的问题，因为在upLoad方法种success方法不能够执行$scope.items[i]的操作，所以我得拿出去，拿出去了以后我又得去知道for循环执行到哪了，所以得加个全局变量。来记录i的值，最后在外面的success回调函数中使用。
其中还需要注意一点是，在我的每一个for循环中我都会调用上传的这个方法。如果不封装成一个方法去调用的话，他就会执行一次，而因为其中存在异步的原因，等都执行的时候其实可能上传的数据和要上传的数据并不相等，所以这里要不停的调用。
这个异步的问题不知道让探索了多久，勉强用逻辑判断去避免了异步出现的一些问题，后买好会陆续整理关于angularjs异步的官方处理方法。
当然，这个逻辑处理方法也是可以解决很多问题。说白了，就是在最终的方法里面设置个flag，不停的检测这个flag满不满足，满足则执行里面的内容，注意：不停的监控！

转载于:https://my.oschina.net/Nealyang/blog/533304