小程序處理異步問題

        要處理異步問題，首先我們得知道什麼是異步，異步就是在A方法中請求，在B方法中調用，如果我們直接在B方法中調用，是獲取不到數據的，所以我們需要對異步方法進行處理，而在微信小程序開發中，大部分請求都是異步的，而在小程序中並沒有給我們直接提供這些異步方法所對應的同步方法，所以如果我們在其它地方使用異步函數處理完的數據的話是沒有效果的，如下：

  data: {
    brandimg: ''  // 設置一個空變量，在請求數據後將請求結果賦值給該變量
  },

  getImgUrl() {  // 把獲取數據的函數簡稱爲A函數
    wx.request({
      url: 'http://daxun.kuboy.top/api/pro',
      success: res => {
        this.setData({
          brandimg: res.data.data[0].brandimg // 將獲取到的數據賦值給data中的變量
        })
        console.log("A方法請求到的數據",this.data.brandimg)  // 在此將賦值的結果輸出
      }
    })
  },

  useImage() { // 把使用數據的函數簡稱爲B函數
    console.log("B方法調用的數據",this.data.brandimg)
  },

  onLoad: function () {
    this.getImgUrl()  // 在頁面加載時執行獲取數據的函數
    this.useImage()    // 檢測是否能正確輸出數據
  },

打印出的結果如下： 

由此可見我們已經成功獲取到了數據，但是並不能在B函數調用數據，

這時候我們就需要通過其他的方法來解決異步問題，在js中，我們有許多處理異步問題的解決方案，如回調函數，async-await，Generator-yield，Promise等，但是在小程序中，並不能直接使用async-await，或者是Generator-yield方法，所以這時候我們可以採用以下幾種方式處理：

1、setTimeout

如果你對獲取的數據無需在其它地方處理的話可以考慮使用setTimeout方法，慎用！！

代碼如下：

 useImage() {
    setTimeout(() => {  // 其它地方都不變，在B函數中設置setTimeout
      console.log("B方法調用的數據", this.data.brandimg)
    },1000)
  },

效果如下：

由此可見通過setTimeout我們是可以成功在其它方法中調用獲取過來的數據

2、Promise

在小程序中可以直接使用promise，我們需要做的就是在A函數中返回一個promise，在返回的promise中再進行獲取數據的操作，把成功獲取到的數據傳入resolve中，把失敗的結果傳入reject，然後在B函數中調用A函數，調用後再使用.then 和 .catch 分別對成功和失敗的結果進行處理

       代碼如下：

  data: {
    brandimg: ''  // 設置一個空變量，在請求數據後將請求結果賦值給該變量
  },

  getImgUrl() {
    return new Promise((resolve, reject) => {
      wx.request({
        url: 'http://daxun.kuboy.top/api/pro',
        success: res => {
          this.setData({
            brandimg: res.data.data[0].brandimg // 將獲取到的數據賦值給data中的變量
          })
          resolve(res)
          console.log("A方法請求到的數據", this.data.brandimg)  // 在此將賦值的結果輸出
        },
        fail: res => {
          reject(res)
        }
      })
    })
  },

  useImage() {
    this.getImgUrl().then(res => {
      console.log("B方法中得到的數據",res)
    }).catch(res =>{
      console.log(res)
    }) 
  },

  onLoad: function () {
    this.useImage()   
  },

效果如下：

以上兩種就是小程序中解決異步問題的兩種方式，有不對的地方請各位指教

（注：如今疫情肆虐，希望大家在逆境中砥礪前行，逆戰到底）