Как переписать скрипт, чтобы AJAX возвращал ответ на запрос в правильном порядке?

Question

[LidiyaK]

Пишу корзину для интернет-магазина

Код для обработки нажатия на кнопку " - ", у регулирования количества товара:

$(".minusCart").click(function () {
            var id = $(this).attr("data-id");
            $.post("/cart/deleteOneAjax/" + id, {}, function (data) {
                if (!data) {
                    location.reload();
                } else {
                    $("#id-count" + id).val(data);
                }
            });
            $.post("/cart/countAjax/" + id, {}, function (data) {
                $("#cart-count").html(data);
            });
            $.post("/cart/productPriceAjax/" + id, {}, function (data) {
                $("#product-price-cart" + id).html(data);
            });
            $.post("/cart/totalPriceAjax/" + id, {}, function (data) {
                $(".total-price-cart").html(data);
            });

        });

То есть, тут важен порядок действий:
1. Удалить товар из корзины
2. Пересчитать количество товаров одного вида
3. Пересчитать сумму у товара (количество*цена)
4. Пересчитать всю сумму корзины

Но из-за того, что запрос не дожидается ответа того запроса, которого шел перед ним, вычисление идет неправильно. Например, иногда удаление товара происходит последним, и, естественно, идет некорректный перерасчет данных в других методах.

Как переписать скрипт, чтобы все возвращалось по-порядку?

Comments

[Сергей Сергей]

$.post("/cart/countAjax/" + id, {}, function (data) {
    $("#cart-count").html(data);
    $.post("/cart/productPriceAjax/" + id, {}, function (data) {
        $("#product-price-cart" + id).html(data);
        $.post("/cart/totalPriceAjax/" + id, {}, function (data) {
            $(".total-price-cart").html(data);
        });
    });
});

Answer 1

[Александр Нестеров]

Собственно, непонятно зачем делать 4 отдельных запроса.
В идеале - делайте один запрос на сервер (в текущем примере - на /cart/deleteOneAjax/<id>). А сервер сам должен обработать все необходимые изменения и вернуть новый вариант корзины.

Answer 2

[Надим]

Используй await чтобы выполнять запросы последовательно:

$('.minusCart').click(async function () {
	
	try {
		
		var btn = $(this);
		
		// Блокируем повторные клики:
		btn.css('pointer-events', 'none');
		
		var id = btn.attr('data-id');
		
		var data = await $.post('/cart/deleteOneAjax/' + id);
		
		if (!data) {
			
			location.reload();
			
		}
		
		else {
			
			$('#id-count' + id).val(data);
			
			data = await $.post('/cart/countAjax/' + id);
			$('#cart-count').html(data);
			
			data = await $.post('/cart/productPriceAjax/' + id);
			$('#product-price-cart' + id).html(data);
			
			data = await $.post('/cart/totalPriceAjax/' + id);
			$('.total-price-cart').html(data);
			
		}
		
	}
	
	catch(err) {
		
		console.error('Ошибка, не удалось заминусить товар!', err);
		
		alert('Ошибка, не удалось заминусить товар! Детали см. в консоли.');
		
	}
	
	// Разблокируем кнопку:
	btn.css('pointer-events', '');
	
});