小程序項目復盤（二） wx.request異步請求處理

在寫請求時，會碰到在success回調函數中將res.data賦給變量，然而在wx.request外仍為undefined的問題，情境如下：

 

按照我們預想的順序，應該先后輸出的text值為 hi，in，out

  onLoad: function (options) {
    var text="hi"
    console.log(text);
    wx.request({
      url: ,
      method: "get",
      data: {
        "msg": {
          "idCard": 
        }
      },
      header: {
        "Content-Type": "application/json;charset=UTF-8"
      },
      success: function (res) {
        console.log(res.data.msg);
        text="in"
        console.log(text);
      },
    }),
    text="out";
    console.log(text);
  },

 

然而，結果卻是： 

 

原因：wx.request是異步請求，JS不會等待wx.request執行完畢再往下執行，所以JS按順序會先執行最外面的text，等服務器返回數據以后，再執行回調函數。

 

如何解決？

1.將我們要設置的變量值在success回調函數中設置，簡單的還行，如果我的第二個請求需要用到這個返回的數據可就慘兮兮了，我把它放到回調函數里請求，這樣重復多次，想想都很酸爽，有個術語叫“回調地獄”就是這樣。

 

2.用promise處理，現在微信已經支持promise了，改造如下：

 onLoad: function (options) {
    var text="hi"
    console.log(text);
    const promise=new Promise(function (resolve, reject) {
    wx.request({
      url: "",
      method: "get",
      data: {
        "msg": {
          "idCard": "",
        }
      },
      header: {
        "Content-Type": "application/json;charset=UTF-8"
      },
      success: function (res) {
        console.log(res.data.msg);
        text="in"
        console.log(text);
        resolve();
      },
    })
    })
    promise.then(function(){
     text="out"
     console.log(text);
    },function(){})                //第一個是resolved狀態執行的函數，第二個是rejected狀態執行的函數
  },

promise詳情：https://es6.ruanyifeng.com/#docs/promise

改造結果：  成功！！

 

 個人理解，promise的意義就是把回調函數里的內容更簡潔化了，清晰明了，在請求少的情況下感覺和在外寫一個函數放進來沒差，數量多它的結構優勢就體現了：

var p1 = new Promise(function(resolve,reject){
    fs.readFile(' ',function(err,data){
        if(err){
            console.log("run p1 reject")
            reject(err)
        }else{
            console.log("run p1 resolve")
            resole(data.toString())
        }
    })
})
 
var p2 = new Promise(function(resolve,reject){
    fs.readFile(' ',function(err,data){
        if(err){
            console.log("run p2 reject")
            reject(err)
        }else{
            console.log("run p2 resolve")
            resole(data.toString())
        }
    })
})
 
var p3 = new Promise(function(resolve,reject){
    fs.readFile(' ',function(err,data){
        if(err){
            console.log("run p3 reject")
            reject(err)
        }else{
            console.log("run p3 resolve")
            resole(data.toString())
        }
    })
})
 
p1.then(function(data){
    console.log('p1 then resolve',data)
    return p2
})
.then(function(data){
    console.log('p2 then resolve',data)
    return p3
})
.then(function(data){
    console.log('p3 then resolve',data)
})

 

不難看出，每一次promise都把返回值傳給了下一個promise，以達到一直傳遞下去的目的，是不是很清晰明了！