微信小程序app.js的onLaunch中的异步请求执行完之后再执行Page的onLoad

这篇具有很好参考价值的文章主要介绍了微信小程序app.js的onLaunch中的异步请求执行完之后再执行Page的onLoad。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

微信小程序app.js的onLaunch中的异步请求执行完之后再执行Page的onLoad

app.js

App({
  globalData: {
    employ: '',
    onLaunchData: null,
  },
  onLaunch: function () {
    console.log("onlaunch");
    let that = this;
    wx.request({
      url: 'http://XXXXXXXX/XXXXXXXX/XXXXXXXX/XXXXXXXX',
      method: 'POST',
      data: {},
      success: function (res) {
        console.log(res);
        //设置请求的值
        that.globalData.onLaunchData = res.data.data
        //设置请求状态
        that.globalData.employ = true;
       //由于这里是网络请求,可能会在 Page.onLoad 之后才返回  在onLoad中定义下app.employCallback 后才执行下述that.employCallback(true),此时用户数据肯定得到了,回调内再则可获取到用户数据
       //所以此处加入 callback 以防止这种情况
        if (that.employCallback) {
          that.employCallback(true);
        }
      },
    });
  },
})

index.js

const app = getApp()
Page({
  data: {
    onLaunchData:null,
  },
  onLoad: function (options) {
    let that = this;
    console.log("onload");
    if (app.globalData.employ && app.globalData.employ != '') {
      console.log("first")
      let onLaunchData = app.globalData.onLaunchData;
      that.setData({
        onLaunchData: onLaunchData ? onLaunchData : null
      });
    } else {
      // 由于 onLaunch里执行的 是网络请求,可能会在 Page.onLoad 之后才返回
      // 所以此处加入 callback 以防止这种情况
      app.employCallback = employ => {
        console.log("进入到app.employCallback");
        console.log(that);
        if (employ != '') {
          console.log(employ);
          that.setData({
            onLaunchData: app.globalData.onLaunchData
          });         
        }
      }
    }
  },
})

这里执行的流程是当微信小程序运行时,首先进入到了onLaunch进行执行,因为onLaunch里面有request是异步请求,所以压力来到了index.js的onload里面,在onload里去判断app.js里的数据状态是什么样的,是true就拿request里的数据,如果没有就对app,js的app对象进行添加一个回调函数属性,在这个回调函数属性里需要传入一个true就能操作index.js的page对象里的data,给onlaunch里请求的值赋值给index.js的page对象里的data。这个时候因为之前在onLaunch写的调用自己的在index.js里写的回调,并传入true,对index.js中data中的数据进行赋值。文章来源地址https://www.toymoban.com/news/detail-598593.html

到了这里,关于微信小程序app.js的onLaunch中的异步请求执行完之后再执行Page的onLoad的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • 微信小程序中封装请求,使用Async await方法,将异步请求变为同步请求方法

    介绍 微信小程序中,很多 API 都是异步的,无法同步处理。可以使用高级封装,通过 async await 方法来同步处理。 方法 在小程序右上角的 详情 里选择 本地设置 , 勾选 ES6转ES5 ,如下所示: 由于 Async Await 是 ES7 语法,所以在小程序里勾选 es6 转 ES5 会报错: ReferenceError: regene

    2024年02月08日
    浏览(55)
  • 详细介绍微信小程序app.js

    这一节,我们详细介绍app.js 这个文件。这个文件的重要性我就不再赘述,前面已经介绍了。 任何一个程序都是需要一个入口的,就好比我们在学c++的时候就会有一个main函数,其他语言基本都是一样。很明确的说,这里的app.js对于基于js-基础模板建立的项目,它就是我们这个

    2024年04月15日
    浏览(46)
  • uniapp 微信小程序 封装公共的请求js(api版本)

    一、新建api文件夹 在项目目录下创建api文件夹,内放files跟index.js文件夹,files文件夹内放每个页面对应的js请求接口 1、index.js 2、例如:login.js 二、config.js 三、main.js 四、页面使用

    2024年02月14日
    浏览(48)
  • 微信小程序 app.js 简单调用其他页面的方法

    方法1 app.js里面 被调用函数页面 test.js 方法2 app.js文件 otherPage.js文件 方法1如果pageName没有this值将会报错,人话就是被调用的页面需要被打开过执行生命周期函数--监听页面加载; 方法2无视方法1

    2024年02月19日
    浏览(41)
  • JS逆向解密秀动app(网页接口)实现抢票【python异步请求】

       HI,上一期我出了js逆向解析五邑大学的AES加密实现模拟登录,后台不少人想让我去解析一下秀动app,去实现抢票。我看因此本文就是介绍如何去实现js逆向解析秀动网页端口实现抢票。 (本文拿最近的场:广州姜云升2022巡演) 一.逆向分析过程 首先,我们想要进入下单的

    2024年01月23日
    浏览(42)
  • 微信小程序中的app.json文件内容注释

    微信小程序中的app.json文件主要是设置页面的路径,页面的窗口,网络超时时间,设置tabBar,是否开启debug模式。 以下是文件内的内容注释: 注意事项,不需要设置.css/.html/.js/.json后缀,只需要一个文件夹名称及文件名称就好。 添加新页面路径的时候,a设置放在文件夹,b也是

    2024年02月07日
    浏览(50)
  • 微信小程序启动报错 app.js错误: ReferenceError: App is not defined at app.js;渲染层错误

    启动微信小程序时,控制台直接报错,完全启动不起来。通过搜索发现时本地调试库的问题,更换调试基础库版本后就可以正常启动了。 1.报错提示: 2.解决方法:修改调试基础库的版本

    2024年02月11日
    浏览(54)
  • 微信小程序中的App、Page、Component的生命周期函数

    有点混乱的官方文档 字面意义上说,生命周期就是指一个对象自身的生老病死; 在程序运行上也可以这么理解,程序也是对象,也有“生老病死”; 程序自身从创建到销毁的过程中,运行到特定的阶段,会触发特定的函数,这些函数,我们就称之为生命周期函数。 每个生命

    2024年02月09日
    浏览(36)
  • uni-app 微信小程序vendor.js 过大的处理方式和分包优化

    小程序工具提示vendor.js过大,已经跳过es6向es5转换。这个转换问题本身不用理会,因为vendor.js已经是es5的了。 关于体积控制,参考如下: 使用运行时代码压缩 HBuilderX创建的项目勾选运行–运行到小程序模拟器–运行时是否压缩代码 cli创建的项目可以在 package.json 中添加参数

    2024年02月11日
    浏览(76)
  • uni-app的Vue.js实现微信小程序的紧急事件登记页面功能

    主要功能实现  完成发生时间选择功能,用户可以通过日期选择器选择事件发生的时间。 实现事件类型选择功能,用户可以通过下拉选择框选择事件的类型。 添加子养殖场编号输入框,用户可以输入与事件相关的子养殖场编号。 完成事件描述输入功能,用户可以通过文本输

    2024年02月12日
    浏览(61)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包