vue axios连续访问同一个接口不同参数请求数据混乱

最新推荐文章于 2024-08-15 09:30:15 发布

Aa_duidui

最新推荐文章于 2024-08-15 09:30:15 发布

阅读量2.5k

点赞数 1

分类专栏： vue 文章标签： vue.js 前端 javascript

本文链接：https://blog.youkuaiyun.com/Aa_duidui/article/details/126832131

版权

本文主要探讨了在Vue项目中使用axios连续访问同一个接口但参数不同的情况下，可能出现的数据混乱问题。通过使用$nextTick解决这个问题，确保每次请求的数据正确更新。文章提到了$nextTick的原理及其在Vue中的作用，帮助开发者理解并解决此类问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

请求方法

//get请求
export function getAction(url,params) {
  return axios({
    url: url,
    method: 'get',
    params: params,
  })
}

实例

//同时多次请求相同接口,会出现返回数据混乱的情况
getAction(url, params).then((res) => {
    this.list= res.result;
})

//解决方案
this.$nextTick(() => {
    getAction(url, params).then((res) => {
        this.list= res.result;
    })
});

使用$nextTick,我测试时候没有再次出现错误的情况

网上找到另一种解决方案:vue中使用axios对同一个接口连续请求致使返回数据混乱的问题 - JavaShuo

多次调用子组件,子组件去请求后台接口,导致网上找到的方法无法解决我出现的问题

$nextTick 原理及讲解

Vue中 $nextTick 原理及作用_nilmao的博客-优快云博客_vue中nexttick的作用

Vue $nextTick详解_半夏_2021的博客-优快云博客_vue的$nexttick