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

前言

之前學(xué)vue的時候看到過異步加載數(shù)據(jù)的寫法，并且在vue里面用的大都是ES6的語法。

對于async和await并不太了解，網(wǎng)上說在uniapp中請求數(shù)據(jù)時總是數(shù)據(jù)和頁面不同步，用了他倆可以將數(shù)據(jù)搞同步。那今天就搞搞async和await

開始

1、在uniapp中封裝一個請求方法，文件名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、再開另一個js文件，叫做axios.js，用于填寫request.js中的參數(shù)并獲取返回數(shù)據(jù)，這里面可以寫好多個export，隨意點嘛。

import request from "./request.js";const url = "http://localhost:9988";
//頁面初始化時獲取前1-20條數(shù)據(jù)export const getInitPaged = () => request(url + '/find/pages/1/20')

3、在xxx.vue中的method中寫一個方法，用于將axios.js中返回的值接收并處理。

//1.先將文件導(dǎo)入import { getInitPaged } from '../../request/axios.js';

//2.在method中創(chuàng)建一個方法,用async修飾，里面的方法用await修飾async getInitPages() {    const arr = await getInitPaged();    this.version = arr.object;//將數(shù)據(jù)給data里面的變量},

//初始化的時候可以使用created() {    this.getInitPages()},

本文完~