javascript - 对 promise 的第二次调用在 promise 返回之前执行 - Angular Javascript

Question

我有以下代码模式，每次用户更新 View 上的数据时都会进行更新调用。

// FACTORY SERVICE CODE
.factory('updateService', ['$http', '$q', function($http, $q){
    var df = $q.defer();
    var updateData = function(uriName, dataObj){
        $http({
          method: 'PUT',
          data: dataObj,
          url: uriName
            }).then(function successCallback(response) {
                console.log('from put');
                console.log(response.data);
                df.resolve(response.data);
            }, function errorCallback(response) {
                console.log('Error', response.data);
                df.reject(response.data);
        });
        return df.promise;
    }
    return {updateData:updateData};
}])

// CONTROLLER CODE
.controller('MainCtrl', ['$scope','updateService', function($scope, updateService) {
    $scope.saveToServer = function(){
        var tmpObj = {data: $scope.dataOne, anotherData: $scope.dataTwo};
        myService.updateData(uriName, tmpObj).then(function(resolved) {
            console.log('CONTROLLER');
            $scope.myData = resolved;
            console.log($scope.myData);
            console.log('end');
        }, function(rejected){
            console.log('put rejected');
        });
    });
    $scope.btnUpdateClick = function(){
        $scope.saveToServer();
    };
}]);

问题:当用户第一次发出更新请求时，代码按预期工作。但是当用户更新后，“resolved promise”代码(在 Controller 中)首先执行，然后 $http 代码(在服务中)执行。

SAMPLE OUTPUT of btnUpdateClick made TWICE with enough interval in-between:

from put
Array [ Object, Object]
CONTROLLER
Array [ Object, Object]
end
CONTROLLER
Array [ Object, Object]
end
from put
Array [ Object, Object]

问题:请指出我在哪里犯了错误？

Is the problem because of PUT request?

或者是否可以通过 $apply 或类似的方式按预期更正执行队列？

Answer 1

您正在使用 "explicit promise creation antipattern"在这里，最重要的是，尝试在所有服务调用中共享一个延迟对象。

只需摆脱 deferred 并利用 promises 的链式属性，一切都会好起来的:

.factory('updateService', ['$http', '$q', function($http, $q){
    var updateData = function(uriName, dataObj){
        return $http({
            method: 'PUT',
            data: dataObj,
            url: uriName
        })
        .then(function successCallback(response) {
            console.log('from put');
            console.log(response.data);
            return response.data;
        })
        .catch(function errorCallback(response) {
            console.log('Error', response.data);
            throw response.data;
        });
    };

    return {updateData:updateData};
}]);