Question

所以这是我的功能

$scope.addToCartReturn = null;

$scope.addToCart = function() {
    $scope.addToCartReturn = false;
    $scope.cartProduct = {};
    angular.extend($scope.cartProduct, {
        "id" : $scope.product.dealDtoId
    }, {
        "optionsDto" : $scope.product.optionsDto
    }, {
        "qty" : 1
    });
    $http({
        method : 'POST',
        url : 'cart/addtocart',
        headers : {
            'Content-Type' : 'application/json'
        },
        data : $scope.cartProduct
    }).success(function(data) {
        if (data.string == "sucess") {
            alert("Sucessfully Added to Cart");
            $scope.addToCartReturn = true;
        }
    });
};

$scope.buyNow = function() {
    $scope.addToCart();
    if ($scope.addToCartReturn = true) {
        $state.go("App.Cart");
    } else {
        alert("Error Please Wait");
    }
};

实际发生的是，当我调用buynow函数时，调用addtocart函数。在完成之前，其他行正在执行。

所以我怀疑如何让它等到addtocart功能结束。

并且每个函数可以单独调用，所以我希望addtocart函数也能提醒成功值

现在我使用addtocartreturn范围变量来了解状态，有什么更好的方法来做到这一点。比如返回变量。

提前谢谢

Answer 1

$http会返回一个承诺，您可以使用.then()等待执行：

$scope.addToCart = function() {
    return $http({
        method : 'POST',
        url : 'cart/addtocart',
        headers : {
            'Content-Type' : 'application/json'
        },
        data : $scope.cartProduct
    })
};

$scope.buyNow = function() {
    $scope.addToCart()
        .then(function() {
            // Success function
            $state.go("App.Cart");
        }, function() {
            // Error function
            alert("An error occured !");
        })
};

有关promises和$q here的更多信息。

Answer 2

您可以使用回调或承诺。承诺已由martijn解释。请参阅回调

var callBack = function(){
 if ($scope.addToCartReturn = true) {
    $state.go("App.Cart");
 } else {
    alert("Error Please Wait");
 }
}
$scope.addToCart(callBack);

更改定义

    $scope.addToCart = function(callBack) {

然后成功调用回调

Answer 3

$http是一个异步函数，因此它将继续执行脚本中的下一个语句，执行addToCart后执行需要处理的事情的一种方法可以如下完成。

传递callback函数作为函数引用，并在成功调用ajax请求时执行它。

 $scope.addToCart = function(successHandler,errorHandler) {
   $http({
     method : 'POST',
     url : 'cart/addtocart',
     headers : {
        'Content-Type' : 'application/json'
     },
     data : $scope.cartProduct
   }).then(
    successHandler,errorHandler // this will trigger the respective callbacks
  );
}; 

$scope.buyNow = function() {
  $scope.addToCart(successCallback);
};

function successCallback(successRes) {
    //add all the stuff here post "addToCart" processing
    $state.go("App.Cart");
}

function errorCallback(errorRes) {
   //handle error response here
}

注意：

正如@charlietfl所述，将.success替换为then。 https://docs.angularjs.org/api/ng/service/ $ HTTP

尝试处理从远程服务器返回的错误响应[这与处理成功的响应一样重要]

在触发ajax调用之前，尝试向用户显示加载图标，并在收到远程服务器的响应后将其删除，这样您的页面就可以进行交互＆amp;看起来不会陈旧。

Answer 4

使用Deferred和Promise在这里解释 click here

等到上一个函数以角度执行

4 个答案: