關(guān)于微信小程序中異步登錄的問(wèn)題? 文件執(zhí)行順序的問(wèn)題與promise問(wèn)題

目前我將登錄操作寫在了 app.js 中, 獲取到微信的 code 后,向自己的服務(wù)器獲取驗(yàn)證 access-token .
代碼如下

app.js

    onLaunch: function () {
        wx.login({
            success: res => {
                // 發(fā)送 res.code 到后臺(tái)換取 openId, sessionKey, unionId
                config.code = res.code;
                this.initUserInfo();
            }
        })
    },
    
    
    // 初始化用戶信息
    initUserInfo: function () {
        wx.request({
            url: config.baseUrl + "/index.php?m=Api&c=User&a=initUserInfo",
            method: 'POST',
            header: {
                "Content-Type": "application/x-www-form-urlencoded"
            },
            data: {
                source_type: 'wxapp',
                code: config.code,
            },
            success: function (res) {
                if (res.data.status == true) {
                    
                    config.uid = res.data.data.uid;
                    config.accessToken = res.data.data.wxapp_access_token;
          
                } else if (res.data.status == false) {
                    console.log(res.data.data);
                } else {

                }
            }
        })
    },

在另一個(gè)文件 met.js 中需要通過(guò)獲取的 uid accessToken 來(lái)請(qǐng)求獲取數(shù)據(jù).
代碼如下
met.js

    eggGetRemoteWords: function() {

        var self = this;
        wx.request({
            url: app.config.baseUrl + "/index.php?m=Api&c=Learning&a=getLearningWord",
            method: 'POST',
            header: {
                "Content-Type": "application/x-www-form-urlencoded"
            },
            data: {
                uid: app.config.uid,
                access_token: app.config.accessToken
            },
            success: function (res) {
                if (res.data.status == true) {
                    self.setData({
                        'word.wordArray': res.data.data,
                    }) 
                    var total = self.data.word.wordArray.length;
                    self.setData({ "word.wordInfo.total": total });

                } else if (res.data.status == false) {

                } else {

                }
            }
        })
    },

但是目前總是 met.js 中的函數(shù) eggGetRemoteWords 總早于 app.j s中 initUserInfo 登錄函數(shù)執(zhí)行,導(dǎo)致無(wú)法獲取到數(shù)據(jù) 因?yàn)?js 異步的原因. 請(qǐng)問(wèn)大家這應(yīng)該怎么處理呢? 我了解到 promise 請(qǐng)問(wèn)如果目前的需求將如何實(shí)現(xiàn)呢?

回答

編輯回答

焚音

eggGetRemoteWords 需要在 initUserInfo 中，登錄成功的 success 回調(diào)中執(zhí)行，所以可以這樣定義

function initUserInfo(callback) {
    wx.request({
        ...
        success: function() {
            ....
            config.uid = res.data.data.uid;
            config.accessToken = res.data.data.wxapp_access_token;
            callback(config);
            ....
        }
    });
}

然后，這樣調(diào)用

initUserInfo(() => eggGetRemoteWords());

但是一般來(lái)說(shuō)，用戶信息取到之后只要不過(guò)期，是不應(yīng)該反復(fù)去取的，所以取用戶信息的部分可以封裝一下

function requestUserInfo(callback) {
    if (config.uid && config.accessToken) {
        callback(config);
    } else {
        initUserInfo(callback);
    }
}

之后調(diào)用也相應(yīng)的改成

requestUserInfo(() => eggGetRemoteWords());

上面都是采用的回調(diào)的方式來(lái)處理異步，如果想用 Promise（說(shuō)實(shí)在的，我不清楚小程序目前對(duì) Promise 支持得如何）

function initUserInfo() {
    return new Promise((resolve, reject) => {
        wx.request({
            ....
            success: function(res) {
                if (....) {
                    config.uid = ...;
                    config.accessToken = ...;
                    resolve(config);
                } else {
                    reject(res);
                }
            },
            fail: function(...args) {
                reject(res);
            }
        });
    });
}

function requestUserInfo() {
    return new Promise((resolve, reject) => {
        if (config.uid && config.accessToken) {
            resolve(config);
        } else {
            initUserInfo().then(resolve).catch(reject);
        }
    });
}

// 調(diào)用
requestUserInfo().then(eggGetRemoteWords);
// 或者
// requestUserInfo().then(eggGetRemoteWords());

2018年1月30日 09:21

編輯回答

使勁操

你的意思莫非是封裝一下 request

function request(url, data, method){
    return new Promise(function(resolve,reject){
        resolve(data);
 })
}

  function initUserInfo(){
     return request('123', {a: 1}, 'post');
  }
  function eggGetRemoteWords () {
     return request('23423', {b: 2}, 'post');
  }
  
  initUserInfo().then(data => {
      console.log(data.a)
      return eggGetRemoteWords()
  }).then(data => console.log(data.b))

代碼如下，可能有錯(cuò)需要你自己修改

function request(url, data, method){
      return new Promise(function(resolve,reject){
         //網(wǎng)絡(luò)請(qǐng)求
         wx.request({
           url: url,
           data: data,
           method: method, // OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT
           header: {
               // 默認(rèn)
               'content-type': 'application/json' 
           }, // 設(shè)置請(qǐng)求的 header
           success: function(res){
             // success網(wǎng)絡(luò)請(qǐng)求成功
             if(res.statusCode !== 200){
                 reject({error:'服務(wù)器忙，請(qǐng)稍后重試',code:500});
                 return;
             }
             resolve(res.data.data);
           },
           fail: function(res) {
             // fail調(diào)用接口失敗
             reject({error: res.error ,code:0});
           },
           complete: function(res) {
             // complete
           }
         })
      })
   }

    initUserInfo:function(...){
       return request(url,{...}, 'post');
    }
    eggGetRemoteWords:function (...) {
       return request(url,{...}, 'post');
    }
    
    initUserInfo().then(() => eggGetRemoteWords())
    .catch(reason => void console.log(resaon))

2017年5月15日 13:46

編輯回答