axios异步问题
情景介绍
做了一个点击按钮,屏蔽表格中一行信息的功能。
问题发现
调用后端接口后,后端会将屏蔽的数据去掉,然后前端再次请求获取剩下的数据刷新页面。
已经封装好了 获取表格数据getData 和 屏蔽数据delData,结果在点击屏蔽按钮后,获取到的数据已经没有那一条记录了,但是页面上的那条记录没有消失。
shieldData() {
const param ={};
delData(param).then(res => {
// 这一步返回值屏蔽成功
console.log(res);
});
// 重新获取表格数据并渲染到页面
this.getData();
}
问题分析
请教同事后了解,因为axios请求是异步的,而执行时是先执行完同步,再执行异步,所以上面的代码实际执行顺序是:getData() -> delData
问题解决
异步的问题,要让getData再delData执行之后,将getData放到delData.then()中。
shieldData() {
const param ={};
delData(param).then(res => {
// 这一步返回值屏蔽成功
console.log(res);
// 重新获取表格数据并渲染到页面
this.getData();
});
}
总结
注意异步的执行顺序,后执行的放到.then()
中去。