Replay applet item (ii) wx.request processing asynchronous requests

In writing request, will meet in the callback function res.data assigned to the variable in the success, however, is still undefined problem wx.request outside, the situation is as follows:

In the order we expected, text should have an output value of 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);
  },

However, the result is:

The reason: wx.request is an asynchronous request, JS does not wait wx.request is finished and then execute down, so after JS order will be executed first outermost text, and other data returned by the server, and then execute the callback function.

How to solve?

1. We want to set the variable value in the success callback function, simply okay, if I need to use this second request data returned may miserable, and I put it in a callback request, so repeated several times, I think very cool acid, there is a term called "callback hell." that's it.

2. promise processing, micro-channel now has support promise, and the transformation is as follows:

 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) { 
        the console.log (res.data.msg); 
        text = " in " 
        the console.log (text); 
        Resolve (); 
      }, 
    }) 
    }) promise.then (function () { 
     text
    = " OUT " 
     the console.log (text); 
    } function () {}) // the first function is performed by the resolved state, the second state is a function execution rejected 
  },

promise Details: https://es6.ruanyifeng.com/#docs/promise

The transformation result: Success! !

Personal understanding, promise of meaning is the callback function of a more concise content, clarity, feel and write out a function not to put small difference in the request, the number of its structural advantage reflects:

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)
})

Easy to see that every promise regard the return value is passed to the next promise, to achieve the purpose has been passed on, it is not very clear!

Replay applet item (ii) wx.request processing asynchronous requests

Guess you like