在使用微信登录时,通常会在调用wx.login获取code后再通过wx.getUserProfile获取iv和encryptedData(加密数据)一起发到后端进行登录验证

在实际使用中如果在wx.login方法调用后再调用再使用wx.getUserProfile会报错

官方解释:

也就是说不能在调用方法的回调中使用wx.getUserProfule()

解决方法:使用Promise.all()方法实现平级调用

Promise.all() 方法接收一个promise的iterable类型(注:Array,Map,Set都属于ES6的iterable类型)的输入,并且只返回一个Promise实例, 那个输入的所有promise的resolve回调的结果是一个数组。这个Promise的resolve回调执行是在所有输入的promise的resolve回调都结束,或者输入的iterable里没有promise了的时候。它的reject回调执行是,只要任何一个输入的promise的reject回调执行或者输入不合法的promise就会立即抛出错误,并且reject的是第一个抛出的错误信息。

简单点说就是会等到两个方法都回调成功该方法才会返回来值,返回值是一个数组。

上代码

封装wx.login和wx.getUserProfile两个接口

 1  /**
2 * 使用promise封装用户信息接口
3 */
4 getUserInfo:function(){
5 return new Promise((resolve,reject) => {
6 wx.getUserProfile({
7 desc: '用户登录', // 声明获取用户个人信息后的用途,后续会展示在弹窗中,请谨慎填写
8 success: (res) => {
9 resolve(res)
10 },
11 fail:(err) => {
12 reject(err)
13 }
14 })
15 })
16 },
17
18 /**
19 * 使用promise封装wx.login接口
20 */
21 getLogin:function(){
22 return new Promise((resolve,reject) => {
23 wx.login({
24 success (res) {
25 resolve(res)
26 },
27 fail: (err) => {
28 reject(err)
29 }
30 })
31 })
32 },

封装登录接口

 1   /**
2 * 登录接口
3 */
4 login: function(){
5 let userRes = this.getUserInfo()
6 let loginRes = this.getLogin()
7 //使用promise.all()平级调用
8 Promise.all([userRes,loginRes])
9 .then((res) => {
10 console.log(res)
11 let param = {
12 code: res[1].code,
13 iv: res[0].iv,
14 encryptedData: res[0].encryptedData
15 }
16 let data = {
17 method: "post",
18 url: api.apiName.wxLogin,
19 params: param
20 }
21 request.request(data)
22 .then(res => {
23 wx.setStorageSync('token', res.data)
24 wx.setStorageSync('hasLogin', true)
25 //获取用户信息
26 let data = {
27 method: "get",
28 url: api.apiName.getUserInfo,
29 params: null
30 }
31 request.request(data)
32 .then(res2 => {
33 wx.hideLoading({})
34 wx.setStorageSync('userInfo', res2.data)
35 })
36 .catch(err => {
37 wx.hideLoading({})
38 console.log(err.msg)
39 })
40 setTimeout(function(){
41 wx.switchTab({
42 url: '../../index/index',
43 })
44 },1500)
45 })
46 .catch(err => {
47 console.log(err.msg)
48 })
49 })
50 }

over over

微信小程序中wx.login和wx.getUserProfile的使用的更多相关文章

  1. 微信小程序的ajax数据请求wx.request

    微信小程序的ajax数据请求,很多同学找不到api在哪个位置,这里单独把小程序的ajax请求给列出来,微信小程序的请求就是wx.request这个api,wx.request(一些对象参数),微信小程 ...

  2. 微信小程序中用户登录和登录态维护

    提供用户登录以及维护用户的登录状态,是一个拥有用户系统的软件应用普遍需要做的事情.像微信这样的一个社交平台,如果做一个小程序应用,我们可能很少会去做一个完全脱离和舍弃连接用户信息的纯工具软件. 让用户 ...

  3. 全栈开发工程师微信小程序-中(下)

    全栈开发工程师微信小程序-中(下) 微信小程序视图层 wxml用于描述页面的结构,wxss用于描述页面的样式,组件用于视图的基本组成单元. // 绑定数据 index.wxml <view> ...

  4. 微信小程序中的app.js-清除缓存

    微信小程序中的app.js 关于小程序app.js生命周期的介绍 App(Object) App() 函数用来注册一个小程序.接受一个 Object 参数,其指定小程序的生命周期回调等. App() ...

  5. 微信小程序中登录操作-----与-----引用

    login.wxml <view> <!-- <image src="./88.png"></image> --> # 在当前目录下 ...

  6. 网页或微信小程序中使元素占满整个屏幕高度

    在项目中经常要用到一个容器元素占满屏幕高度和宽度,然后再在这个容器元素里放置其他元素. 宽度很简单就是width:100% 但是高度呢,我们知道的是height:100%必须是在父元素的高度给定了的情 ...

  7. 在微信小程序中使用富文本转化插件wxParse

    在微信小程序中我们往往需要展示一些丰富的页面内容,包括图片.文本等,基本上要求能够解析常规的HTML最好,由于微信的视图标签和HTML标签不一样,但是也有相对应的关系,因此有人把HTML转换做成了一个 ...

  8. 全栈开发工程师微信小程序-中(中)

    全栈开发工程师微信小程序-中(中) 开放能力 open-data 用于展示微信开放的数据 type 开放数据类型 open-gid 当 type="groupName" 时生效, ...

  9. 全栈开发工程师微信小程序-中

    全栈开发工程师微信小程序-中 多媒体及其他的组件 navigator 页面链接 target 在哪个目标上发生跳转,默认当前小程序,可选值self/miniProgram url 当前小程序内的跳转链 ...

  10. 微信小程序中的循环遍历问题

    比如:如果在微信小程序中要遍历输出 0-9 的数,我们会使用for循环 ;i<;i++){ console.log(i); } 确实结果也是这样: 但是,如果我在循环时同时调用wx的api接口1 ...

随机推荐

  1. rosbag 初尝试

    overview ROS (Robot Operating System, 机器人操作系统) 提供一系列程序库和工具以帮助软件开发者创建机器人应用软件.它提供了硬件抽象.设备驱动.函数库.可视化工具. ...

  2. Java 设置PDF跨页表格重复显示表头行

    在创建表格时,如果表格内容出现跨页显示的时候,默认情况下该表格的表头不会在下一页显示,在阅读体验上不是很好.下面分享一个方法如何在表格跨页是显示表格的表头内容,这里只需要简单使用方法 grid.set ...

  3. Java | Map集合

    Map集合 在现实生活中,有非常多的东西,是和另外一种东西对应的,并且还是唯一的,比如:身份证号与个人,个人与手机,一夫一妻...等,这种关系就是对应关系,又叫做映射.Java为这种数据类型提供了专门 ...

  4. RabbitMQ 安装与界面管理

    RabbitMQ 安装与界面管理 RabbitMQ概述 官网:https://www.rabbitmq.com/ RabbitMQ是部署最广泛的开源消息代理. RabbitMQ拥有成千上万的用户,是最 ...

  5. Day1 Markdown学习!

    Markdown学习 标题 一级标题:# (空格)+内容 二级标题:##(空格)+内容 同理可支持到六级标题 字体 Hello,World! 两边两个** 加粗 Hello,World! 两边一个* ...

  6. 深入学习Netty(5)——Netty是如何解决TCP粘包/拆包问题的?

    前言 学习Netty避免不了要去了解TCP粘包/拆包问题,熟悉各个编解码器是如何解决TCP粘包/拆包问题的,同时需要知道TCP粘包/拆包问题是怎么产生的. 在此博文前,可以先学习了解前几篇博文: 深入 ...

  7. Jenkins 进阶篇 - 参数化构建

    我们在构建任务时经常会遇到这样的情景,一个任务配置好了以后,在后面的构建过程中,又会修改一些配置.例如,我们构建项目的代码可能是拉取指定的分支或者是Tag进行构建,又或者是在构建是需要指定特定的运行平 ...

  8. jenkens离线安装插件方法,及插件下载地址

    1. 在可联网的计算机上登录jenkens,并安装需要的插件,安装的插件一般位于.../jenkens/plugins下. 2. 在/jenkens/plugins目录中拷贝已安装的插件到局域网下的j ...

  9. Python自动化测试面试题-Linux篇

    目录 Python自动化测试面试题-经验篇 Python自动化测试面试题-用例设计篇 Python自动化测试面试题-Linux篇 Python自动化测试面试题-MySQL篇 Python自动化测试面试 ...

  10. Thinkphp 生成的验证码不显示问题解决

    在调用验证码之前加上   ob_clean(); 将: public function verify(){                $verify = new \Think\Verify();  ...