Vue+ElementUI表格数据渲染延迟：如何解决异步请求导致的页面数据缺失问题？-js教程-PHP中文网

Vue+ElementUI表格数据渲染延迟：如何解决异步请求导致的页面数据缺失问题？

聖光之護

发布： 2025-03-08 09:12:01

原创

791人浏览过

vue+elementui表格数据渲染延迟：如何解决异步请求导致的页面数据缺失问题？

Vue+ElementUI表格数据异步加载导致渲染延迟问题及解决方案

在Vue和ElementUI项目中，异步请求常常导致表格数据渲染延迟，甚至出现数据缺失的情况。本文将分析一个典型案例，并提供有效的解决方案。

问题描述： 一个使用el-table组件显示申请记录的页面，需要异步获取申请人姓名、化学品名称等信息。页面加载后，这些字段缺失，只有在打开浏览器开发者工具后才显示。

问题代码：

立即学习“前端免费学习笔记（深入）”；

async getdata() {
    await axios.get("http://localhost:10100/apply/getalloutapplypageofgroup", {
        params: {
            approvalid: localStorage.getItem("userid"),
            pn: this.currentpage,
            ps: this.pagesize
        }
    }).then(res => {
        this.tabledata = res.data.data.records;
        this.total = res.data.data.total;
    });

    for (var i in this.tabledata) {
        await axios.get("http://localhost:10100/user/getusername", {
            params: {
                userid: this.tabledata[i].applicantid
            }
        }).then(res => {
            this.tabledata[i].applicantname = res.data.data;
        });

        // ... 其他异步请求 ...
    }
}

登录后复制

问题根源： 代码中使用循环和await，导致异步请求串行执行，效率低下。getdata函数执行完毕后，tabledata可能未完全填充，造成页面渲染不完整。开发者工具的刷新机制可能触发Vue的响应式系统更新视图。

解决方案：使用Promise.all优化异步请求

为了解决这个问题，我们应该并行执行所有异步请求，并在所有数据都准备好后更新视图。Promise.all可以完美实现这一点。

优化后的代码：

async getData() {
    await axios.get("http://localhost:10100/Apply/getAllOutApplyPageOfGroup", {
        // ...
    }).then(res => {
        this.tableData = res.data.data.records;
        this.total = res.data.data.total;

        Promise.all(this.tableData.map(item => Promise.all([
            axios.get("http://localhost:10100/User/getUserName", { params: { userId: item.applicantId } }),
            axios.get("http://localhost:10100/Chemicals/getChemicalName", { params: { chemicalId: item.chemicalId } }),
            axios.get("http://localhost:10100/Chemicals/getUnit", { params: { chemicalId: item.chemicalId } })
        ]).then(([userNameRes, chemicalNameRes, unitRes]) => {
            item.applicantName = userNameRes.data.data;
            item.chemicalName = chemicalNameRes.data.data;
            item.unit = unitRes.data.data;
        }))).then(() => {
            this.$forceUpdate(); // 可选，强制更新视图
        });
    });
}

登录后复制

通过Promise.all，所有异步请求并行执行，显著提高效率。数据填充完成后，this.$forceUpdate()（可选）强制更新视图，确保所有数据正确显示。 localStorage.getItem 应改为 localStorage.getItem。

通过以上优化，可以有效解决Vue+ElementUI表格数据渲染延迟问题，确保页面数据完整且高效地呈现。

以上就是Vue+ElementUI表格数据渲染延迟：如何解决异步请求导致的页面数据缺失问题？的详细内容，更多请关注php中文网其它相关文章！