前端发起更改数据请求后再获取后端数据发现数据并未更改的一个解决办法

前端发起更改数据请求后再获取后端数据发现数据并未更改的一个解决办法

问题再现

复制代码
async function refuseRefund(id,type){
    if(confirm('确定拒绝?')){
        await fetch('http://127.0.0.1:3000/api/refuseRefund', {
            method: 'POST',
            headers: {
                'Content-type': 'application/json'
            },
            body: JSON.stringify({
                id: id,
                type: type
            })
        })
        .then(response => {
            if (!response.ok) {
                throw new Error('Network response was not ok');
            }
            return response.json();
        })
        .then(data => {
            //重载
            addOrdersList();
        })
        .catch(error => {
            console.error('Error:', error);
        });  
    }
}

async function addOrdersList() {
    buyShipOrders = await getAll('buy');
    console.log(buyShipOrders); 
}

我们向后端发起一个http请求来修改数据库的某个值,然后再重新获取数据,发现数据并未更改,奇怪,明明函数里用了await()

原因

原来后端node.js函数出了问题

复制代码
app.post('/api/refuseRefund', (req, res) => {
    const orderId = req.body.id;
    const type = req.body.type;
    pool.query(`UPDATE ${type} set status = ? WHERE id = ? `, ['已拒绝',orderId], (error, results) => {
        if (error) {
            console.error('Error querying database:', error);
            res.status(500).send('Internal Server Error');
            return;
        }
    });
    res.json({status: true});
});

nodejs也是js,那么既然是js,那么它就是异步的,也就是说,res.json()会先于pool.query()执行,数据库修改也是需要时间的,这就回造成数据库还没处理完就返回了res,前端这边拿到res也是立马再发起了一个获取数据的请求,由于数据库还没修改完,所以返回的是修改前的值

解决

将res.json()放在pool.query()里面

复制代码
app.post('/api/refuseRefund', (req, res) => {
    const orderId = req.body.id;
    const type = req.body.type;
    pool.query(`UPDATE ${type} set status = ? WHERE id = ? `, ['已拒绝',orderId], (error, results) => {
        if (error) {
            console.error('Error querying database:', error);
            res.status(500).send('Internal Server Error');
            return;
        }
        res.json({status: true});
    });
});

总结

node.js是异步的,需要考虑执行顺序

相关推荐
森叶13 分钟前
Electron 主进程中使用Worker来创建不同间隔的定时器实现过程
前端·javascript·electron
霸王蟹21 分钟前
React 19 中的useRef得到了进一步加强。
前端·javascript·笔记·学习·react.js·ts
霸王蟹21 分钟前
React 19版本refs也支持清理函数了。
前端·javascript·笔记·react.js·前端框架·ts
繁依Fanyi27 分钟前
ColorAid —— 一个面向设计师的色盲模拟工具开发记
开发语言·前端·vue.js·编辑器·codebuddy首席试玩官
codelxy30 分钟前
vue引用cesium,解决“Not allowed to load local resource”报错
javascript·vue.js
程序猿阿伟1 小时前
《社交应用动态表情:RN与Flutter实战解码》
javascript·flutter·react native
明似水1 小时前
Flutter 开发入门:从一个简单的计数器应用开始
前端·javascript·flutter
沐土Arvin2 小时前
前端图片上传组件实战:从动态销毁Input到全屏预览的全功能实现
开发语言·前端·javascript
Zww08912 小时前
el-dialog鼠标在遮罩层松开会意外关闭,教程图文并茂
javascript·vue.js·计算机外设
爱编程的鱼2 小时前
C#接口(Interface)全方位讲解:定义、特性、应用与实践
java·前端·c#