處理小程序網絡請求異步執行的問題

這兩天寫微信小程序注意到了有些時候會發現使用this.data.list拿到的是空數據，但是明明自己已經請求到了數據了。這就很讓人頭疼。

原因：因為wx.request是一個異步的請求，所以數據請求的同時，可以繼續向下執行函數。所以這里值還沒有賦值上就開始打印了變量的值

比如：以下代碼在執行的時候 this.updateData()和 this.updateState()不會分先后，可能先執行前者，可能先執行后者。如果先執行后者的話就先打印list數組了，那么這個時候因為前者是請求數據的，還未執行呢就已經打印list數組了，那么這個時候拿到的肯定是一個空數組。

Page({
  data: {
  list: []
  },
  onload: function() {
    this.updateData();
    this.updateState();
  },
  updateData: function() {   //請求數據
    var that = this
    wx.request({
    url: XXXXX, //你的請求地址
    data: {},
    success: function(res) {
    that.setData({
      list: this.data.data
      }
    }
  })
  },
  updateState: function() {
    var list = this.data.list
    console.log(list)
    //進行數據狀態判斷
    },
})

這樣運行的時候，還沒有等到updateData更新到數據，已經在執行updateState了，這樣得到的結果往往是不正確的，於是找方法發現了ES6 的promise
promise的用法為：

const promist = new Promise(function(resolve,reject){
    if(/*異步操作成功*/){
        resolve(value);
    }else{
        reject(error);
    }
})

改造后代碼：

Page({
  data: {
  list: []
  },
  onload: function() {
    var that =this
    new Promise(function(resolve,reject){
        that.updateData(resolve);
    }).then(function(){
        that.updateState();
    })
  },
  //請求數據
  updateData: function(resolve) {
    var that = this
    wx.request({
    url: XXXXX, //你的請求地址
    data: {},
    success: function(res) {
    that.setData({
      list: this.data.data
      if(resolve!=null){
        resolve('ok')
        }
      }
    }
  })
  },
  //拿數據打印
  updateState: function() {
    var list = this.data.data
    console.log(list)
    //進行數據狀態判斷
    },
})

這樣就能保證updateData執行完了之后才執行updateState

附

還有一個笨方法就是定時器了，先執行請求數據的代碼updateData，等過一會再執行打印數據的代碼updateState。
當然這種方法是不可取的，最好的辦法就是用promise來解決這種異步操作