微信小程序 ———— 异步请求中使用async/await实现同步请求

在小程序开发中，大多数都是在打开小程序在app.js中获取用户信息的，但是如果我们进到主页获取内容需要用到用户信息 比如用户id，那我们要怎么保证在进到主页时已经拿到了用户信息呢？

最开始做小程序的时候 我用过各种笨方法，比如在主页写了个定时器，判断用户信息获取到了在停止定时器。虽然能解决，但是总觉得不爽。

后来发现了 Promise  配合 async/await 来实现异步中达到同步的效果

await 单词意思已经很明确的，就是要等我执行完了 才能向下执行

下面具体例子来解释要如何使用：

1.  一般在项目中，我们都会封装一个请求的方法：

function request(data) {
  if (!data.params) {
    data.params = {}
  }
  return new Promise((resolve, reject) => {
    let url = 'https://www.baidu.com' + data.url // https://www.baidu.com 为请求地址
    let header = {
      "accept": "application/vnd.iOS.lshy-1.0+json",
      "App-Version": "1.0",
    }
    wx.request({
      url,
      data: data.params,
      method: data.type,
      header,
      success: res => {
        resolve(result)
      },
      fail: err => {
        reject(err)
      }
    })
  })
}

 实际开发中封装的肯定没有这么简单了，可能还有token, 还要判断状态码，请求返回的状态等，这里就简单封装一个了！

2. 不使用 async/await

    这里 getUserInfo  和 getList 两个方法是异步执行的

onLoad: function (options) {
    this.getUserInfo()
    this.getList()
},


// 请求用户信息

getUserInfo: function(){
    let data = {
        type: 'get',
        url: '/get/userInfo',
        params: {}
    }
    let userInfo = this.request(data)
}

3. 使用 async/await

    这里 getUserInfo  和 getList 两个方法本来是异步执行的 ，但是通过使用 async/await 实现 getList 会等拿到userInfo之后才执      行

onLoad: function (options) {
    this.getUserInfo()
    this.getList()
},

// 请求用户信息

async getUserInfo: function(){
    let data = {
        type: 'get',
        url: '/get/userInfo',
        params: {}
    }
    let userInfo = await this.request(data)
}

4.  如果同时存在多个请求 ，有一些请求之间不存在依赖关系，不需要等其他结束才能执行，可以使用 Promise.all() 来解决

onLoad: function (options) {
    Promise.all([this.getUserInfo(), this.a(), this.c()])
    this.getList()
    this.b()
},

// 请求用户信息

async getUserInfo: function(){
    let data = {
        type: 'get',
        url: '/get/userInfo',
        params: {}
    }
    let userInfo = await this.request(data)
}

如 还存在 a, b, c三个方法   a 和 c 不需要等待获取到用户信息在执行， 可以使用Promise.all([this.getUserInfo(), this.a(), this.c()])来实现异步执行

 

至此 END!  

是不是很方便， 很实用呢！