等到前一个函数以 Angular 执行

wait till the previous function executes in angular

本文关键字：函数 一个 Angular 执行      更新时间：2023-09-26

所以这是我的函数

$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函数也在成功时提醒一个值

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

提前谢谢你

$http返回一个 promise，您可以使用如下.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 !");
        })
};

有关承诺和$q的更多信息，请点击此处。

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

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

更改定义 

    $scope.addToCart = function(callBack) {

然后在成功时调用回调

$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 调用之前，请尝试向用户显示加载图标，并在收到来自远程服务器的响应后将其删除，这样您的页面将进行交互并且看起来不会过时。

使用此处解释的延迟和承诺点击这里

相关文章：