Estoy haciendo un carrito en un sitio web de comercio electrónico.
Este script elimina una pieza del producto si el usuario hace clic en un botón
$(".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); }); });Entonces, los pasos que debe hacer este script son:
Entonces el orden es muy importante. Pero debido a que se trata de solicitudes asincrónicas, las respuestas podrían devolverse en un orden diferente. Por eso, a veces recibo una respuesta para /cart/deleteOneAjax/ el último y todos los demás datos no se calculan correctamente.
¿Qué hago para solucionarlo?
Usar ajax en lugar de usar este método de publicación hará que el manejo de su solicitud sea mucho más personalizable.
Como una solución a este problema, puede usar la palabra clave 'aguardar' antes de la llamada a la función de publicación, luego debe hacer que la función de evento de clic sea 'asincrónica'.
Y la solución fácil por ahora es hacer que estas llamadas sean sincrónicas, reemplace los métodos 'post' con llamadas 'ajax'.
$.ajax({ type: 'POST', url: url, data: data, success: success, dataType: dataType, async:false //Here I am making it synchronus });Consulte la documentación oficial aquí: https://api.jquery.com/jquery.ajax/
ajax es una función asíncrona , lo que significa que JS no es necesario para procesar su código desde la línea 1 hasta la línea 100 de acuerdo con la secuencia que espera si hay una función asíncrona en el medio.
En su caso, el JS de hecho procesa todas sus solicitudes de ajax en la secuencia correcta, simplemente no espera que cart/deleteOneAjax responda y luego solo procesa el siguiente ajax cart/countAjax , y así sucesivamente.
¿Cómo resolver?
A la vieja usanza: Promete entonces
La nueva forma: espera asíncrona
Aquí lo demuestro con Promise Then way:
function deleteOne(id) { return new Promise((resolve, reject) => { $.post("/cart/deleteOneAjax/" + id, {}, function (data) { if (!data) { reject("no data") } else { resolve(data) } }); }) } function count(id) { return new Promise((resolve, reject) => { $.post("/cart/countAjax/" + id, {}, function (data) { if (!data) { reject("no data") } else { resolve(data) } }); }) } function productPrice(id) { return new Promise((resolve, reject) => { $.post("/cart/productPriceAjax/" + id, {}, function (data) { if (!data) { reject("no data") } else { resolve(data) } }); }) } function totalPrice(id) { return new Promise((resolve, reject) => { $.post("/cart/totalPriceAjax/" + id, {}, function (data) { if (!data) { reject("no data") } else { resolve(data) } }); }) } $(".minusCart").click(function () { var id = $(this).attr("data-id"); deleteOne(id).then(deleted => { // your logic before process next ajax count(id).then(countData => { // your logic before process next ajax productPrice(id).then(productPriceData => { // your logic before process next ajax totalPrice(id).then(totalPriceData => { }) }) }) }).catch(deleteError=>{ //logic for deleteOne rejection scenario }) }) Una desventaja de Promise Then es el infierno de devolución de llamada, pero eso es para su estudio futuro.