微信小程序 通过promise/async await解决异步接口网络延迟时间问题的写法

前提条件

1、微信小程序开发工具需要开启Es6转Es5(未验证是否必要)、增强编译
2、以wx.login()网络请求为例

再根目录下创建api文件夹，并再api文件夹下新建login.js

// api/login.js
module.exports = {
  getLogin : (url, param) => {
    return new Promise((resolve, reject) => {
      wx.login({
        success: res => {
          // 发送 res.code 到后台换取 openId, sessionKey, unionId
          console.log(res.code)
          resolve()
        }
      })
    })
  }
}

在index.js中引入api/login.js文件

//index.js
//获取应用实例
const apiLogin = require('../../api/login')

Page({
  data: {
    isDisplay :false,
    title: "挑战者"
  },

  onLoad: function () {
    this.init();
  },
  // 初始化
  async init () {
    await apiLogin.getLogin()
    console.log("在code之后打印");
    this.setData({
      isDisplay :true,
      title: "非挑战者"
    })
  }
})

标题index.wxml中键入代码

<view wx:if="{{isDisplay}}">
<p>"{{title}}"</p>
</view>

运行打印结果

1、工作台中 “在code之后打印” 几个字将会在wx.login中code打印后进行打印
2、页面中的结果将在执行完wx.login()请求完毕以后再展示，并且展示
的title结果 是 “非挑战者”