zoukankan      html  css  js  c++  java
  • 微信/头条小程序如何确保异步请求执行完后再执行各页面的onLoad方法

    微信/头条小程序如何确保异步请求执行完后再执行各页面的onLoad方法

    在开发的过程中,由于小程序生命周期的执行顺序是不可暂停的,以登录权限为例:
    当进入小程序时首先执行app.js的onLaunch--onShow方式后再执行b页面的onLoad方法,b页面需要弹出提示登录的弹窗,当服务器返回需要一定时间或网络较差时,此时小程序已经执行了b页面的方法,导致在登录接口还没有返回前就已经在b页面判断了权限。

    app.js

    onLaunch() {
        loginByCode().then(resolve => {
            //do something
        });
    }
    loginByCode() {
        return new Promise(resolve => {
            wx.request({
                url: 'https://xxx.com',
                method: 'GET',
                data: {},
                success: ({
                    data,
                    statusCode,
                    header
                }) => {
                    //接口返回结果后将登录状态置为true
                    app.globalData.loginPermissions = true;
                    resolve();
                }
            }) 
        });
    }
    

    这里我们在小程序冷启动时onLaunch中做了个简单的异步请求。

    页面b.js

    onLoad() {
        //当进入此页面时,需要判断是否已登录用户,如果没有登录需要弹出登录弹窗
        if(!app.globalData.loginPermissions) {
            this.loginPopup.open();
        }else {
            //do something
        }
    }
    

    假如按照以上方式处理,会导致loginByCode登录接口返回缓慢时,进入b页面后,即使用户已经是登录的状态,但依然会弹出登录窗口。

    对于上述问题,我们来改进一下代码

    app.js

    onLaunch() {
        loginByCode().then(resolve => {
            if (this.loginCallBack) {
                //这里的this 是指当前页面的this
                this.loginCallBack();
            }
        });
    }
    loginByCode() {
        return new Promise(resolve => {
            wx.request({
                url: 'https://xxx.com',
                method: 'GET',
                data: {},
                success: ({
                    data,
                    statusCode,
                    header
                }) => {
                    //接口返回结果后将登录状态置为true
                    app.globalData.loginPermissions = true;
                    resolve();
                }
            }) 
        });
    }
    

    页面b.js

    onLoad() {
        //当进入此页面时,需要判断是否已登录用户,如果没有登录需要弹出登录弹窗
        if(app.globalData.loginPermissions && app.globalData.loginPermissions != '') {
          //do something
        }else {
          app.loginCallBack = () => {
            if (!app.globalData.loginPermissions) this.loginPopup.open();
            else this.loginPopup.close();
          }
        }
    }
    
  • 相关阅读:
    C++-类的const成员变量
    Linux-编译器gcc/g++编译步骤
    C++-理解构造函数、析构函数执行顺序
    Linux-Unix版本介绍
    C++-const_cast只能用于指针和引用,对象的const到非const可以用static_cast
    Linux-如何查看登陆shell的类型
    C++-不要在构造和析构函数中调用虚函数
    C++-模板的声明和实现为何要放在头文件中
    C++-函数模板特化如何避免重复定义
    Linux-Gcc生成和使用静态库和动态库详解
  • 原文地址:https://www.cnblogs.com/xiechuanghong/p/14113350.html
Copyright © 2011-2022 走看看