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

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

相关推荐
前端世界29 分钟前
鸿蒙UI开发全解:JS与Java双引擎实战指南
javascript·ui·harmonyos
Xiaouuuuua41 分钟前
一个简单的脚本,让pdf开启夜间模式
java·前端·pdf
@Dream_Chaser1 小时前
uniapp ruoyi-app 中使用checkbox 无法选中问题
前端·javascript·uni-app
深耕AI1 小时前
【教程】在ubuntu安装Edge浏览器
前端·edge
倔强青铜三1 小时前
苦练Python第4天:Python变量与数据类型入门
前端·后端·python
倔强青铜三1 小时前
苦练Python第3天:Hello, World! + input()
前端·后端·python
上单带刀不带妹1 小时前
JavaScript中的Request详解:掌握Fetch API与XMLHttpRequest
开发语言·前端·javascript·ecmascript
倔强青铜三2 小时前
苦练Python第2天:安装 Python 与设置环境
前端·后端·python
ningmengjing_2 小时前
在 PyCharm 中安装并配置 Node.js 的指南
开发语言·javascript·ecmascript
我是若尘2 小时前
Webpack 入门到实战 - 复习强化版
前端