微信小程序之onLaunch与onload异步问题
所述问题:
前端时间开发了一个微信小程序商城项目,因为这个项目我们的需求是进入小程序就通过wx.login({}) 这个api进行用户登录,获取系统后台的用户基本信息。再此之前,一直以为微信小程序中的App.js 中onLaunch (小程序初始化完成执行该方法)方法比其他页面的的 onload 方法要先执行。那么问题就来了,我每次进入小程序首页的时候有时候会先执行onlaunch方法,有时又会先执行首页的onload的方法,最后经过确定,在微信小程序中这两个方法并没有执行先后的顺序,因为他们都是异步执行的。当然开发过微信小程序的开发者都知道微信请求数据都是异步执行的,如在同一个onload写两个请求数据的方法,它不一定会按照先后顺序去执行,这就是传说中的异步地狱了。
解决方法:
当然,我既然知道这个执行顺序是由于微信小程序的异步执行请求原因导致的。我们可以使用Promise 来解决异步编程问题啦。我的解决方法是,首先我是在app.js 中定义了一个全局方法,用来登录小程序请求用户信息的接口,每次进入首页的时候先判断我是否已有用户信息缓存,假如不存在那么请求app.js中的全局方法进行数据获取。在这里我就不详细介绍Promise 的基本用法了,因为阮一峰已经将的非常详细了,大家可以点击查看【http://es6.ruanyifeng.com/#docs/promise#Promise-all】。
方法实现:
App.js方法实现:
App({
onLaunch: function() {
console.log('App Launch')
//不在这里默认请求
},
/**
* 定义全局变量
*/
globalData: {
openid: '', //用户openid
userId: '', //用户编号
},
/**
* 用户登录请求封装(解决onlaunch和onload执行顺序问题)
*/
userLogin: function() {
var that = this;
//定义promise方法
return new Promise(function(resolve, reject) {
// 调用登录接口
wx.login({
success: function(res) {
if (res.code) {
console.log("用户登录授权code为:" + res.code);
//调用wx.request请求传递code凭证换取用户openid,并获取后台用户信息
wx.request({
url: 'https://www.xxxx.xxx.api', // 后台请求用户信息方法【注意,此处必须为https数字加密证书】
data: {
code: res.code //code凭证
},
header: {
'content-type': 'application/json' // 默认值
},
success(res) {
console.log(res.data)
if (res.data.errcode == ) {
//获取用户信息成功
that.globalData.openid = res.data.openid;
that.globalData.userId = res.data.UserId;
//存入session缓存中
wx.setStorageSync("userId", that.globalData.userId)
console.log(that.globalData.userId);
console.log(that.globalData.openid);
//promise机制放回成功数据
resolve(res.data);
} else {
reject('error');
}
},
fail: function(res) {
reject(res);
wx.showToast({
title: '系统错误'
})
},
complete: () => { } //complete接口执行后的回调函数,无论成功失败都会调用
})
}
else
{
reject("error");
}
}
})
})
}
});
index.js实现:
const app=getApp();//初始化app.js
page({ onLoad: function (option) {
var that = this;
let UserId = wx.getStorageSync("userId");
console.log("进入首页的用户编号为:" + UserId);
if (UserId == '') {
app.userLogin().then(res => {
console.log("promise回调后的数据:");
console.log(res);
if (res.errcode == ) {
//把首页需要请求的数据接口都提取到一个自定义方法中
that.GetData();
}
})
}
else
{
//用户缓存存在
that.GetData();
} }
,
GetData()
{
//需要用到用户编号换取商品信息的接口 }
})
总结:
当然解决异步回调的方法有很多种,不过我在这里只说我认为好用的一种,大家有什么想法也可以一起分享学习。
微信小程序之onLaunch与onload异步问题的更多相关文章
- 微信小程序中使用Async-await方法异步请求变为同步请求
微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading等.如果需要同步处理,可以使用如下方法: 注意: Async ...
- WeChat-SmallProgram:微信小程序中使用Async-await方法异步请求变为同步请求
微信小程序中有些 Api 是异步的,无法直接进行同步处理.例如:wx.request.wx.showToast.wx.showLoading 等.如果需要同步处理,可以使用如下方法: 提示:Async ...
- 微信小程序的onLaunch()方法和onShow()方法
在app.js里面你会发现一个onLaunch()方法,这个方法是当小程序加载完毕后就执行的方法,此外,还有一个onShow()方法,先看下面的代码 app.js //app.js App({ onL ...
- 微信小程序开发——使用promise封装异步请求
前言: 有在学vue的网友问如何封装网络请求,这里以正在写的小程序为例,做一个小程序的请求封装. 关于小程序发起 HTTPS 网络请求的Api,详情可以参考官方文档:wx.request(Object ...
- 微信小程序学习记录(一)
如何定义一个全局变量: 1,在根目录下app.js中添加 App({ globalData: { g_isPlayingMusic : false, g_currentMusicPostId :nul ...
- 微信小程序 后端用Flask实现
手上有个微信小程序项目,因为对Python相对熟悉一些,打算后端用python写,具体采用python 轻量级的flask框架. 在做的过程中,有些问题需要考虑,记录在下边. 1. 开发的小程序后端怎 ...
- 微信小程序 教程及示例
作者:初雪链接:https://www.zhihu.com/question/50907897/answer/128494332来源:知乎著作权归作者所有,转载请联系作者获得授权.微信小程序正式公测, ...
- 微信小程序中同步 异步的使用
https://www.jianshu.com/p/e92c7495da76 微信小程序中使用Promise进行异步流程处理 https://www.cnblogs.com/cckui/p/102 ...
- 微信小程序wx.login先执行onLaunch与onLoad加载顺序问题
@ 目录 遇到问题 请求api返回需要先登录,实际上登录已成功 问题分析 解决问题 自定义回调函数 app.js index.js 扩展提问 学习交流 随机数字随机幸运数+ My Blog 技术交流 ...
随机推荐
- Windows上使用Git托管代码到Coding
作者:荒原之梦 Git简介: Git是一款分布式版本控制系统,可用于项目的版本管理.Git可以管理本地代码仓库与远程代码仓库间的连接以及进行版本控制,使得我们可以在本地离线进行修改等操作,之后再将代码 ...
- SQL注入简单介绍
一.SQL注入概念 1.sql注入是一种将sql代码添加到输入参数中 2.传递到sql服务器解析并执行的一种攻击手法 举例:某个网站的用户名为name=‘admin’.执行时为select ...
- 关于如何给<input type="date">设置默认当前日期的方法 和 给table固定宽度
var ddd = new Date(); var day =ddd.getDate(); if(ddd.getMonth()<10){ var month = "0"+(d ...
- java之集合Collection详解之3
package cn.itcast_03; public class Student { // 成员变量 private String name; private int age; // 构造方法 p ...
- yii2.0 路由美化以及自定义设置
在配置文件里修改: 如果把'enablePrettyUrl' => true,设为true那么你的gii就访问不到: 'rules' => [ '<c ...
- Python eval 函数妙用
eval 功能:将字符串str当成有效的表达式来求值并返回计算结果. 语法: eval(source, globals, locals) -> value 参数: source:一个Python ...
- Reading Code Is Hard
注: 以下内容引自: https://blogs.msdn.microsoft.com/ericlippert/2004/06/14/reading-code-is-hard/ Reading Cod ...
- BZOJ_1878_[SDOI2009]HH的项链_莫队
BZOJ_1878_[SDOI2009]HH的项链_莫队 Description HH有一串由各种漂亮的贝壳组成的项链.HH相信不同的贝壳会带来好运,所以每次散步 完后,他都会随意取出一 段贝壳,思考 ...
- BZOJ3629(JLOI2014)聪明的燕姿
(⊙﹏⊙)我交了好久,有坑啊...(如果没有匹配的话,即输出0种情况要记得换行...) 就是搜索,加上一点数论,并不太难... #include<cstdio> #include<c ...
- VUE+webpack+npm项目中的RSA加解密
一.安装jsencrypt npm i jsencrypt node_modules文件夹中出现jsencrypt 二.引入jsencrypt 在main.js中import: import JsEn ...