使用 Promise 和 .then() 解决同异步问题

在购物车功能中，用户点击“加入购物车”或“删除购物车”时，可能会遇到数据同步问题。例如，当用户快速连续点击“删除”按钮时，可能会导致删除操作基于过时的数据，从而引发错误。为了解决这个问题，我们可以使用 Promise 和 .then() 来确保异步操作的顺序执行。

1. 问题描述

在购物车功能中，用户点击“删除购物车”按钮时，系统需要先获取最新的商品 ID，然后再执行删除操作。如果这两个操作是异步的，且没有正确的顺序控制，可能会导致删除操作基于过时的数据，从而引发错误。

2. 解决方案

我们可以将购物车数据刷新操作封装为一个返回 Promise 的函数 cartRefresh。该函数会在数据刷新完成后返回最新的商品 ID。然后，在删除购物车商品时，我们先调用 cartRefresh 获取最新的商品 ID，然后再执行删除操作。

3. 代码实现

3.1 `cartRefresh` 函数

function cartRefresh(uid) {return new Promise((resolve, reject) => {$.ajax({type: "post",url: path + "/mobile/shopping",data: {id: userId},success: function (results) {if (results.code === 1) {cartData = results.data;let $id;for (let i = 0; i < cartData.length; i++) {if (cartData[i].commodity_id == uid) {$id = cartData[i].id;break; // 找到后立即退出循环}}console.log('cartRefresh 成功，$id =', $id);resolve($id); // 返回 $id}},error: function (e) {console.log('cartRefresh 失败:', e.status);reject(e); // 返回错误}});});
}

3.2 `cartDel` 函数

function cartDel(data) {$('#commendContent').on('click', '.goodsImg', function (e) {let goodsBox = $(e.target).closest('.shops');let idElement = goodsBox.find('.goodsImg');let uid = idElement.attr('uid');if (idElement.attr('src') == './img/ok.png') {console.log(`删除`);cartRefresh(uid).then((newId) => {console.log('cartRefresh 返回的 $id:', newId);// 在这里使用 newId$.ajax({type: 'post',url: path + '/mobile/shopping/del',data: {id: newId // 使用当前的 $id},success: function (results) {if (results.code === 1) {idElement.attr('src', './img/add.png');idElement.attr('ids', ''); // 清空购物车 IDconsole.log(idElement);}},error: function (e) {console.log(e.status);},});}).catch((error) => {console.error('cartRefresh 失败:', error);});} else if (idElement.attr('src') == './img/add.png') {console.log(`新增`);$.ajax({type: 'post',url: path + '/mobile/shopping/add',data: {user_id: userId,commodity_id: uid,num: 1},success: function (results) {if (results.code === 1) {idElement.attr('src', './img/ok.png');}},error: function (e) {console.log(e.status);},});}});
}

4. 代码解析

cartRefresh 函数：该函数通过 $.ajax 请求获取最新的购物车数据，并返回一个 Promise。在请求成功时，解析购物车数据并找到对应的商品 ID，然后通过 resolve 返回该 ID。如果请求失败，则通过 reject 返回错误。
cartDel 函数：该函数监听购物车商品的点击事件。当用户点击“删除”按钮时，首先调用 cartRefresh 函数获取最新的商品 ID，然后在 .then() 中执行删除操作。如果 cartRefresh 失败，则通过 .catch() 捕获错误并输出日志。