时间戳

首页 > 解决方案 > Vue 应用程序：为什么 axios 在解析结果后不等待完成？

javascript - Vue 应用程序：为什么 axios 在解析结果后不等待完成？

问题描述

我有一个从 api 获取数据并用行填充我的 boostrap-vue 表的组件。然后这些行具有复选标记，用于收集行的 id 并将它们发送到 api 以删除它们。后端工作得很好。我的目标是在删除调用之后再次调用 api，以获取更新的数据集并重新渲染我的表，但我的第二个 axios 调用似乎在我的组件数据更新之前触发。

所以基本的顺序是：

  1. 获取初始数据
  2. 发送 1 行或多行的删除请求
  3. 获取新数据并更新表

问题出现在第 2 步和第 3 步之间

我已经尝试解决删除的 axios 调用并在.then()块内进行新的 axios 调用

初始加载（ajax 只是 axios 请求的包装对象）

ajax.get(url + queryOrder)
    .then((response) => {
        console.log(response.data)
        this.fileData = response.data.queryResults;
        window.scrollTo(0, 0);
})

检查行并单击删除按钮时

ajax.delete(this.deleteUrl, {data: payload})
  .then((response) => {
    console.log("sent delete request.....")
    this.fileData = []; // array of objects to populate rows
    this.deleteFiles = [];
    this.closeModal();
    this.sendSortData();
});

并且该sendSortData()函数只是包含另一个 axios 请求来获取更新的数据，这与初始加载相同。

ajax.get(this.searchUrl + searchFieldsQuery)
    .then((response) => {
        console.log(response.data)
        this.fileData = response.data.queryResults; // should contain updated data
        window.scrollTo(0,0);
      })

我已经在每个函数中记录了几个值，并且可以确认正在发生正确的顺序，甚至检查了服务器日志以确认这些以正确的顺序发送。我尝试过使用 async/await ，它只是语法糖并给出相同的结果。我已经验证了更改 fileData 的 prop 值会更改子组件表数据，所以我不确定我还做错了什么。

我还检查了 chrome 开发工具中的网络选项卡，查看了初始和最终请求的数据，并确认删除的文件仍然存在于新数据中，但是如果我在 chrome 调试器中放置断点并检查值中的新响应sendSortData()，已删除的文件消失了，页面重新正确呈现。这让我相信这些 axios 调用的异步性质并没有按预期工作。当然，如果我刷新页面，删除的行就消失了，但我想重新渲染组件而不刷新。我应该watch()在孩子道具上放一个吗？我应该使用生命周期方法吗？另请注意，所有这些调用都发生在同一个组件内。任何答案都非常感谢！

标签： javascriptasynchronousvue.jsaxios

解决方案

推荐阅读