Angularjs异步问题逻辑处理方法

摘要: Angularjs异步问题逻辑处理方法

项目上一定是学习新知识最好的办法，而遇到问题解决问题，在到出现新的问题。。。周而复始最终解决问题，我觉得这是一个认知的过程。
说下在富瑞项目上遇到的这个问题吧：
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满不满足，满足则执行里面的内容，注意：不停的监控！