Vue ElementUIテーブルレンダリング遅延：非同期リクエストによって引き起こされるデータ表示問題を解決する方法は？

Vue ElementUIテーブルデータレンダリング遅延と最適化戦略

LATENCYの表形式データレンダリングは、VUEおよびElementUIプロジェクトで一般的な問題です。この記事では、ページが読み込まれたときにテーブル内の一部のフィールドが表示されず、ブラウザ開発者ツールを開いた後にのみ表示されるケースを分析します。

問題の説明：

el-tableコンポーネントを使用してアプリケーションレコードを表示するページでは、バックエンドから申請者IDを取得し、ループコールインターフェイスを介して申請者の名前やその他の情報を取得し、 tableDataに動的に追加する必要があります。ページが読み込まれた後、申請者の名前などのフィールドが欠落しており、開発者ツールを開いた後にのみ表示されます。元のコードは次のとおりです。

 async getData（）{
    axios.getを待っている（ "http：// localhost：10100/apply/getalloutapplypageofgroup"、{
        パラメージ：{
            承認：localStorage.getItem（ "userid"）、
            PN：this.currentPage、
            PS：this.pagesize
        }
    }）。それから（res => {
        this.tabledata = res.data.data.records
        this.total = res.data.data.total
    }）

    for（this.tabledataのvar i）{
        Axios.getを待っている（ "http：// localhost：10100/user/getUsername"、{
            パラメージ：{
                userid：this.tabledata [i] .applicantid
            }
        }）。それから（res => {
            this.tabledata [i] .applicantname = res.data.data
        }）

        // ...その他の非同期リクエスト...
    }
}

このコードはmountedライフサイクル中にgetdataメソッドを呼び出します。問題の根本的な原因は、 getdata関数で多数のawaitキーワードが使用されていることです。開発者ツールをオンにすると、VUEアップデートメカニズムが誤ってトリガーされ、データが表示される場合があります。

解決策：Promise.allとの同時リクエスト

同期ループや複数のawaitを避け、コードを最適化し、非同期リクエストを同時リクエストに変更する必要があり、 Promise.allを使用してデータを更新する必要があります。改善されたコードは次のとおりです。

 async getData（）{
    const applydata = appait axios.get（ "http：// localhost：10100/apply/getalloutapplypageofgroup"、{
        パラメージ：{
            承認：localstorage.getitem（ "userid"）、
            PN：this.currentPage、
            PS：this.pagesize
        }
    }）;
    this.tabledata = applydata.data.data.records;
    this.total = applydata.data.data.total;

    const promises = 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：{chemalid：item.chemicalid}}）
        ]。
            item.applicantname = usernameres.data.data;
            item.chemicalname = chemaricnameres.data.data;
            item.unit = unitres.data.data;
        }）;
    }）;

    待ち望んでいます。すべて（約束）; //すべてのリクエストがこれを完了するのを待ちます。$ forceUpdate（）; // Update Viewを強制}

Promise.allを通じて、全体として、複数の非同期リクエストが同時に実行され、効率が大幅に向上し、データディスプレイの遅延が解決されます。すべてのデータ収集が完了した後、 tableDataを更新してthis.$forceUpdate()を使用してビューを強制的に更新して、データがel-tableに正しく表示されるようにします。

tableDataデータをel-tableに適切にバインドすることを忘れないでください。この最適化戦略は、非同期操作によって引き起こされる遅延問題のレンダリングを効果的に回避します。

以上がVue ElementUIテーブルレンダリング遅延：非同期リクエストによって引き起こされるデータ表示問題を解決する方法は？の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。