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

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

1. 问题描述

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

2. 解决方案

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

3. 代码实现
3.1 cartRefresh 函数
javascript 复制代码
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 函数
javascript 复制代码
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', ''); // 清空购物车 ID
                                console.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() 捕获错误并输出日志。

5. 优点
  • 数据同步 :通过 Promise.then() 确保删除操作基于最新的购物车数据,避免了数据同步问题。

  • 代码可读性 :将异步操作封装为 Promise,使代码结构更加清晰,易于维护。

  • 用户体验:确保每次操作都基于最新数据,提高了用户体验。

6. 总结

通过使用 Promise.then(),我们能够有效地解决购物车功能中的数据同步问题,确保每次操作都基于最新的数据。这种设计不仅提高了代码的可读性和可维护性,还提升了用户体验,避免了因数据不同步而引发的错误。

希望这篇博客对你有所帮助!如果有任何问题或建议,欢迎留言讨论。

相关推荐
灋✘逞_兇15 分钟前
Node.Js是什么?
服务器·javascript·node.js
当牛作馬36 分钟前
React——ant-design组件库使用问题记录
前端·react.js·前端框架
0wioiw01 小时前
Flutter基础(前端教程⑨-图片)
前端·flutter
一只一只妖1 小时前
uniapp小程序无感刷新token
前端·小程序·uni-app
小飞悟1 小时前
那些年我们忽略的高频事件,正在拖垮你的页面
javascript·设计模式·面试
绅士玖1 小时前
📝 深入浅出 JavaScript 拷贝:从浅拷贝到深拷贝 🚀
前端
中微子1 小时前
闭包面试宝典:高频考点与实战解析
前端·javascript
brzhang1 小时前
前端死在了 Python 朋友的嘴里?他用 Python 写了个交互式数据看板,着实秀了我一把,没碰一行 JavaScript
前端·后端·架构
G等你下课2 小时前
告别刷新就丢数据!localStorage 全面指南
前端·javascript