uniapp异步加载数据实现页面同步

更新日期: 2020-11-25阅读: 1.8k标签: 同步分享

复制链接

新浪微博

QQ 好友

扫一扫分享

前言

之前学vue的时候看到过异步加载数据的写法，并且在vue里面用的大都是ES6的语法。对于async和await并不太了解，网上说在uniapp中请求数据时总是数据和页面不同步，用了他俩可以将数据搞同步。那今天就搞搞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中的参数并获取返回数据，这里面可以写好多个export，随意点嘛

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

//页面初始化时获取前1-20条数据
export const getInitPaged = () => request(url + '/find/pages/1/20')

3.在xxx.vue中的method中写一个方法，用于将axios.js中返回的值接收并处理

//1.先将文件导入
import { getInitPaged } from '../../request/axios.js';

//2.在method中创建一个方法,用async修饰，里面的方法用await修饰
async getInitPages() {
    const arr = await getInitPaged();
    this.version = arr.object;//将数据给data里面的变量
},

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

链接: https://fly63.com/article/detial/9890

uniapp异步加载数据实现页面同步

前言

开搞

Js同步，异步和事件轮询

Flutter 同步系统的 HTTP 代理设置

css更改后html不同步怎么解决？

vue父子组件状态同步的最佳方式续章(v-model篇)

Node.js 同步异步、阻塞与非阻塞