微信小程序 ———— 異步請求中使用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!  

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