使用AngularJS中的angular.forEach等待异步执行

Question

我正在尝试使用api保存所选项目列表的标签。在api中，我只为第一个选定项存储标签一次，而对于其余项，我不存储这些项，而是将条目创建为共享。问题是：第一个选定的项目命中了api，在存储数据之前，其他选定的项目也受到了命中，由于数据尚未存储，我无法提供共享的引用。

我尝试过的事情-

这是我的控制器：

let selectedQstCount = $scope.selectedQuestion.length;
for (i = 0; i < selectedQstCount; i++) {
    var params = {
        "jsonString": callbackData,
        "questionNo": $scope.Questionlst.find(a => a.QuestionId == $scope.selectedQuestion[i].id).QuestionNo,
        "projectName": $scope.ProjectName,
        "projectId": $scope.ProjectId,
        "questionId": $scope.selectedQuestion[i].id,
        "newCodeFrame": ($scope.attachCodeFrame == "No" ? "FALSE" : "TRUE"),
        "sharedQstId": $scope.sharedQstId,
        "groupName": $scope.groupName
    }
    var defer = $q.defer();
    CodeFrameJsonfactory.CodeFrameUpload(params, function (data) {
        //success
        $q.resolve(data);
    }, function (callbackData) {
        //error
        inform.clear();
        inform.add(callbackData.Message, { ttl: -1, type: 'danger' });
    });
    return defer.promise;
}

这是我的工厂：

CodeFrameUpload: function (params, successCallback, errorCallback) {
    var deferred = $q.defer();
    $http({
        method: 'POST',
        url: APIUrls.getUrl("uploadCodeFrame"),
        data: params,
        headers: {
            'Content-Type': 'application/json'
        },
        cache: false
    }).success(function (data) {
        deferred.resolve(data);
        successCallback(data);
    }).error(function (data) {
        deferred.reject(data);
        errorCallback(data);
    });
    return deferred.promise;
},

我也尝试过将deffered用于angular.forEach。

我想要实现的是，直到CodeFrameUpload函数完成之前，我不想再次点击它。

Answer 1

返回数据承诺：

CodeFrameUpload: function (params) {
    return $http({
        method: 'POST',
        url: APIUrls.getUrl("uploadCodeFrame"),
        data: params,
        headers: {
            'Content-Type': 'application/json'
        },
        cache: false
    }).then(function(response) {
        return response.data;
    });
},

映射返回的诺言：

var promiseArr = $scope.selectedQuestion.map(question => {
    var params = {
        "jsonString": callbackData,
        "questionNo": $scope.Questionlst.find(a => a.QuestionId == question.id).QuestionNo,
        "projectName": $scope.ProjectName,
        "projectId": $scope.ProjectId,
        "questionId": question.id,
        "newCodeFrame": ($scope.attachCodeFrame == "No" ? "FALSE" : "TRUE"),
        "sharedQstId": $scope.sharedQstId,
        "groupName": $scope.groupName
    }
    return CodeFrameJsonfactory.CodeFrameUpload(params);
});

使用$q.all：

$q.all(promiseArr).then(function(dataArr) {
    console.log(dataArr);
}).catch(function(errResponse) {
    console.log(errResponse);
});

$q.all返回单个承诺，将使用值的数组/哈希值对其进行解析，每个值对应于promise数组/哈希中相同索引/键处的承诺。如果任何一个承诺都被拒绝解决，则此结果承诺将以相同的拒绝值被拒绝。

有关更多信息，请参阅

• AngularJS $q Service API Reference - $q.all

---

更新

上面的示例并行执行HTTP请求。

按顺序链接承诺：

var paramsArr = $scope.selectedQuestion.map(question => ({
        "jsonString": callbackData,
        "questionNo": $scope.Questionlst.find(a => a.QuestionId == question.id).QuestionNo,
        "projectName": $scope.ProjectName,
        "projectId": $scope.ProjectId,
        "questionId": question.id,
        "newCodeFrame": ($scope.attachCodeFrame == "No" ? "FALSE" : "TRUE"),
        "sharedQstId": $scope.sharedQstId,
        "groupName": $scope.groupName
}));

var sequentialPromise = paramsArr.reduce( (promise, paramsObj) => {
    promise.then(function(dataArr) {
        var singlePromise = CodeFrameJsonfactory.CodeFrameUpload(paramsObj);
        return $q.all([...dataArr, singlePromise]);
    },
    $q.when([])
);

sequentialPromise.then(function(dataArr) {
    console.log(dataArr);
});