unaipp異步加載數(shù)據(jù)實(shí)現(xiàn)頁(yè)面同步

前言

??之前學(xué)vue的時(shí)候看到過(guò)異步加載數(shù)據(jù)的寫(xiě)法,并且在vue里面用的大都是ES6的語(yǔ)法。對(duì)于async和await并不太了解,網(wǎng)上說(shuō)在uniapp中請(qǐng)求數(shù)據(jù)時(shí)總是數(shù)據(jù)和頁(yè)面不同步,用了他倆可以將數(shù)據(jù)搞同步。那今天就搞搞async和await


開(kāi)搞

??1.在uniapp中封裝一個(gè)請(qǐng)求方法,文件名request.js

export default function request(url, data = {}, method = 'GET') { //data和method是初始化值
    return new Promise((resolve, reject) => {
        uni.request({
            url: url,
            data: data,
            method: method,
            success: (res) => {
                console.log(res)
                resolve(res.data);
            },
            fail: (err) => {
                reject(err)
            }
        });
    })
}

??2.再開(kāi)另一個(gè)js文件,叫做axios.js,用于填寫(xiě)request.js中的參數(shù)并獲取返回?cái)?shù)據(jù),這里面可以寫(xiě)好多個(gè)export,隨意點(diǎn)嘛

import request from "./request.js";
const url = "http://localhost:9988";

//頁(yè)面初始化時(shí)獲取前1-20條數(shù)據(jù)
export const getInitPaged = () => request(url + '/find/pages/1/20')

??3.在xxx.vue中的method中寫(xiě)一個(gè)方法,用于將axios.js中返回的值接收并處理

//1.先將文件導(dǎo)入
import { getInitPaged } from '../../request/axios.js';
//2.在method中創(chuàng)建一個(gè)方法,用async修飾,里面的方法用await修飾
async getInitPages() {
    const arr = await getInitPaged();
    this.version = arr.object;//將數(shù)據(jù)給data里面的變量
},
//初始化的時(shí)候可以使用
created() {
    this.getInitPages()
},
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成,瀏覽時(shí)請(qǐng)結(jié)合常識(shí)與多方信息審慎甄別。
平臺(tái)聲明:文章內(nèi)容(如有圖片或視頻亦包括在內(nèi))由作者上傳并發(fā)布,文章內(nèi)容僅代表作者本人觀點(diǎn),簡(jiǎn)書(shū)系信息發(fā)布平臺(tái),僅提供信息存儲(chǔ)服務(wù)。
禁止轉(zhuǎn)載,如需轉(zhuǎn)載請(qǐng)通過(guò)簡(jiǎn)信或評(píng)論聯(lián)系作者。

友情鏈接更多精彩內(nèi)容