Vue Elementui Jadual Penangguhan: Bagaimana menyelesaikan masalah paparan data yang disebabkan oleh permintaan tak segerak?

Vue Elementui Jadual Data Menangguhkan Kelewatan dan Strategi Pengoptimuman

Data tabular Latency Latency adalah masalah biasa dalam projek Vue dan Elementui. Artikel ini akan menganalisis kes di mana beberapa bidang dalam jadual tidak dapat dipaparkan apabila halaman dimuatkan dan hanya akan dipaparkan selepas membuka alat pemaju penyemak imbas.

Penerangan Masalah:

Halaman yang menggunakan komponen el-table untuk memaparkan rekod aplikasi memerlukan mendapatkan ID pemohon dari backend, dan kemudian mendapatkan nama pemohon dan maklumat lain melalui antara muka panggilan gelung, dan secara dinamik menambahkannya ke tableData . Selepas beban halaman, medan seperti nama pemohon hilang dan hanya akan dipaparkan selepas membuka alat pemaju. Kod asal adalah seperti berikut:

 async getData () {
    Await Axios.get ("http: // localhost: 10100/apply/getAlloutApplyPageOfGroup", {
        Params: {
            Kelulusan: localStorage.getItem ("userId"),
            PN: this.currentpage,
            PS: This.pagesize
        }
    }). Kemudian (res => {
        this.tabledata = res.data.data.records
        this.total = res.data.data.total
    })

    untuk (var i dalam this.tabledata) {
        Tunggu Axios.get ("http: // localhost: 10100/user/getusername", {
            Params: {
                userId: this.tabledata [i] .applicantid
            }
        }). Kemudian (res => {
            this.tabledata [i] .applicantName = res.data.data
        })

        // ... permintaan asynchronous lain ...
    }
}

Kod ini memanggil kaedah getdata semasa kitaran hayat mounted . Penyebab utama masalahnya adalah bahawa sebilangan besar kata kunci await digunakan dalam fungsi getdata , yang membawa kepada gelung penyegerakan dan menyebabkan kelewatan data. Menghidupkan alat pemaju secara tidak sengaja boleh mencetuskan mekanisme kemas kini VUE, dengan itu memaparkan data.

Penyelesaian: Permintaan serentak dengan janji.all

Elakkan gelung segerak dan pelbagai await , kod harus dioptimumkan, permintaan tak segerak harus ditukar kepada permintaan serentak, dan data harus dikemas kini menggunakan Promise.all . Kod yang lebih baik adalah seperti berikut:

 async getData () {
    const applyData = menunggu axios.get ("http: // localhost: 10100/apply/getalloutapplypageofgroup", {
        Params: {
            kelulusan: 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 => {
        kembali janji. semua ([
            axios.get ("http: // localhost: 10100/user/getusername", {params: {userid: item.applicantid}}),
            axios.get ("http: // localhost: 10100/bahan kimia/getChemicalName", {params: {chemicalid: item.chemicalid}}),
            axios.get ("http: // localhost: 10100/bahan kimia/getUnit", {params: {chemicalid: item.chemicalid}})
        ]). Kemudian (([usernameres, chemicalnameres, unitres]) => {
            item.applicantName = usernameres.data.data;
            item.ChemicalName = Chemicalnameres.data.data;
            item.unit = unitres.data.data;
        });
    });

    menanti janji.all (janji); // tunggu semua permintaan untuk menyelesaikan ini. $ ForceUpdate (); // paparan kemas kini daya}

Melalui Promise.all . Semua permintaan tak segerak dilaksanakan secara serentak, yang meningkatkan kecekapan dan menyelesaikan kelewatan paparan data. Selepas semua pengambilalihan data selesai, el-table kini tableData dan gunakan this.$forceUpdate()

Ingatlah untuk mengikat data tableData dengan betul dalam el-table . Strategi pengoptimuman ini berkesan menghindari masalah kelewatan yang disebabkan oleh operasi tak segerak.

Atas ialah kandungan terperinci Vue Elementui Jadual Penangguhan: Bagaimana menyelesaikan masalah paparan data yang disebabkan oleh permintaan tak segerak?. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!