鍍金池/ 問答/HTML/ 微信小程序中，Promise 中的wx.request等異步接口執(zhí)行順序問題

微信小程序中，Promise 中的wx.request等異步接口執(zhí)行順序問題

菜鳥初識Promise，為了解決小程序得的登陸問題，我采用了Promise去保證用戶先行登陸，再執(zhí)行后面的接口操作。最近卻出現(xiàn)了問題，之前我都是想都沒想 new Promise，今天發(fā)現(xiàn)一個問題，then()
調用的函數(shù)getClub()中的wx.request發(fā)送竟早于最早的Promise對象userlogin()中的wx.request請求發(fā)送。
調用代碼如下

    var  that = this;
    app.userlogin()
    .then(
      that.getClub()
    )
    .then(that.changeclub())
    .catch(
      (err)=>{
        console.log(err)
      }
    )

app.js 中的函數(shù)代碼

：

  userlogin: function () {
    var that = this;
    return new Promise(
      (resolve,reject) => {
        console.log('app.js 登陸函數(shù) 開始運行')
        wx.showLoading({
          title: '登陸中',
        })
        wx.login({
          success: function (res) {
            var code = res.code
            wx.getUserInfo({
              success: function (res) {
                that.globalData.userInfo = res.userInfo;
                console.log(that.globalData.userInfo)
                wx.request({
                  url: that.login_url,
                  header: {
                    'content-type': 'application/x-www-form-urlencoded'
                  },
                  data: {
                    code: code,
                    nickname: res.userInfo.nickName,
                    gender: res.userInfo.gender,
                    city: res.userInfo.city,
                    province: res.userInfo.province,
                    country: res.userInfo.country,
                    head: res.userInfo.avatarUrl,
                  },
                  method: 'POST',
                  success(res) {
                    that.thirdid = res.data.data
                    wx.setStorageSync('thirdid', res.data.data)
                    wx.setStorageSync('userInfo', that.globalData.userInfo)
                    return resolve('app.js login success')
                    
                  }
                })
              },
              fail: function () {
                wx.showToast({
                  title: '登陸異常',
                  image: '/image/erro.png'
                })
                reject('app.js login failed')
              }
            })
          },
          fail: function () {
            wx.showToast({
              title: '登陸異常',
              image: '/image/erro.png'
            })
            reject('app.js login failed')
          },
        })
      }
    )
  }

回調函數(shù)代碼

getClub:function(){
    console.log('getClub 開始運行')；
    let thirdid = wx.getStorageSync('thirdid');
    let that = this;
    wx.request({
      url: app.manage_club,
      data:{
        thirdid:thirdid
      },
      success(res){
        if(res.data.code==200){
           that.setData({
             club_list:res.data.data
           })
           console.log('獲取社團列表成功')
           return 
        }
        else{
           return 
        }
      }
    })
  }

這里getClub的請求發(fā)送會早于userlogin()的請求，導致getClub中thirdid undefined。
是不是Promise中的異步請求也必須封裝成Promise對象，也就是我必須封裝wx.request方法？還是這里代碼有問題?
有勞各位大佬指教了，感謝感謝。

回答
編輯回答
別傷我

.then() 不是那樣用的。
看你的第一段代碼，正確寫法是：

var that = this;
app.userlogin()
  .then(() => {
    that.getClub()
  })
  .then(() => {
    that.changeclub()
  })
  .catch((err)=> {
    console.log(err)
  })

你體會一下區(qū)別…如果不明白的話我再細講
這不是 Promise 的知識，是函數(shù)傳參的知識

2017年3月2日 08:56
編輯回答
孤酒

樓上說的是對的，已 +1。

另外，如果你想保證每一步都是順序執(zhí)行的，則需要在 .then(function) 里面的函數(shù)也返回一個 Promise 對象。比如：

app.userlogin()
  .then(() => {
    that.getClub()
  })
  .then(() => {
    that.changeclub()
  });

這樣的寫法，實際上 this.getClub() 和 this.changeClub() 是同時執(zhí)行的（存在執(zhí)行先后，但不存在異步，可以認為是同時執(zhí)行）。必須這樣（假設他倆都返回一個 Promise 實例）：

app.userlogin()
  .then(() => {
    return that.getClub()
  })
  .then(() => {
    return that.changeclub()
  });

它們才會順序執(zhí)行，即前面一個執(zhí)行完才會執(zhí)行后面一個。

順帶廣告一下我的講堂：Promise 的 N 種用法。

2017年8月4日 08:35