在使用微信登录时,通常会在调用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. [转载] 笑话:Developer and product manager

    A man flying in a hot air balloon suddenly realizes he's lost. He reduces height and spots a man dow ...

  2. Vue数据双向绑定不起作用、Vue如何正确的手动添加json数据、Vue视图层不刷新、手动刷新视图层

    Vue.set(obj,"key","value") 如果接收到来自服务器的消息时,我们需要对其进性进一步处理 我们想当然的会直接将数据添加进json 像这样: ...

  3. shell脚本编写规范和相关变量类型

    shell编程规范与变量    一.shell脚本概述    ① 什么是shell? Linux中有哪些shell?    ② shell的作用   ③ 用户的登录shell    ④ shell脚本 ...

  4. DHCP原理于配置

    DHCP原理于配置                      一.DHCP服务                       1)使用DHCP的好处                       2)DH ...

  5. 使用BeautifulSoup自动爬取微信公众号图片

    爬取微信分享的图片,根据不同的页面自行修改,使用BeautifulSoup爬取,自行格局HTML修改要爬取图片的位置 import re import time import requests imp ...

  6. React 之 组件生命周期

    React 之 组件生命周期 理解1) 组件对象从创建到死亡它会经历特定的生命周期阶段2) React组件对象包含一系列的勾子函数(生命周期回调函数), 在生命周期特定时刻回调3) 我们在定义组件时, ...

  7. Scala学习——函数

    一.函数的定义(def) object FunctionApp { //定义函数:方法体内最后一行为返回值,不需要使用return def add(a:Int,b:Int):Int={ a + b } ...

  8. LinuxMint 19/Ubuntu 19.10重置开始菜单以及任务栏

    ====================== 问题:任务栏以及开始菜单弄不见了 解决方法: 快捷键打开终端,输入重置命令: dconf reset -f /

  9. git clone 中途停止不动

    参考链接1:https://blog.csdn.net/weixin_36965307/article/details/105046699 参考链接2:https://blog.csdn.net/le ...

  10. 第五篇 -- git基础教程

    git(权威指南)基础教程第一章 git -- gitbash -- cygwin git service:gitolite 两个的目录不同 gitbash ~ windows/home/admini ...