目錄

• 先說結論
• 問題
• 解決方案
• 使用Promise封裝回調函式
• 總結

先說結論

業務流程: 從網路日誌中檢查到token過期，則跳轉到登入頁面，要求使用者重新登入。

程式碼邏輯：使用自定義的HttpUtil封裝wx.request API，全域性捕獲過期token並自動處理後，下發給上層業務。

問題

Token過期的現象：

在網路請求中，客戶端token會過段時間過期，使得後續的網路請求失敗，丟擲異常日誌如下：

data: {code: "99997",date: 1634174831325,message: "TOKEN EXPIRED",status: "ERROR"}

小程式提供的API: wx.request 是非常簡單，只能在請求響應成功後的回撥函式中開發者自己去檢查token過期，常規的做法：

1.定義檢查token過期的方法：

function checkAuth(resp) {
  if(resp.data.code == '99997') { //我們伺服器返回的token過期的code是99997，code可以和後臺自定義。
    wx.navigateTo({
      url: '/pages/login/login',//這裡跳轉到登入頁，要求使用者重新登入
    })
    console.log("需要重新登入......");
  }
}

2.在每個請求介面的響應中，呼叫checkAuth（res）去捕獲token過期。

問題程式碼

function createMatchImage(data,fun) {
  //console.log(getApp())
  console.log("token = " + getApp().getToken())
  wx.request({
    method: 'POST',url: conf.baseUrl + 'match/matchImages',data: data,header: {
      'content-type': 'application/on','sessionKey': getApp().getToken()
    },success: function (res) {
      console.log(res)
      conf.checkAuth(res) // 判斷token是否過期，如果過期則跳轉到登入頁。
      fun(res);
    }
  });
}
 
functionhttp://www.cppcns.com
 
 getMatchImages(id,fun) {
  wx.request({
   ...
    success: function (res) {
      conf.checkAuth(res)
   ...
    }
  });
}
 
function deleteImage(id,fun) {
...
  wx.request({
    ...
    success: function (res) {
      conf.checkAuth(res)
      fun(res);
      //return res;
    }
  });
}

在上面的程式碼中，每個介面都會有重複的程式碼，如配置baseUrl，token，checkAuth()。所以這裡我們可以進一步去除重複程式碼。

解決方案

統一網路請求的入口，定義HttpUtil類。 封裝wx.request方法。

const get = (url,success,fail) => {
    var _token = getApp().getToken()
    wx.request({
      method:'GET',url: baseUrl + url,header:{
        'Authorization': _token,'content-type': 'application/json',},success:function(res) {
        checkAuth(res) // 在此處統一攔截token過期，跳轉到登入介面
        console.log(res)
        success(res)
      },fail:function(res){
        console.log("請求失敗")
        fail(res)
      }
    })
}

 
module.exports = {
    get: get,post: post
}

HttpUtil的使用場景：

const httpUtil= require("../common/http/HttpUtil")
 
//邏輯層發起網路請求，只需要傳遞url和成功回撥函式。這比以前更加簡潔。
function getActivities(success) {
    httpUtil.get('meetup/api/v1/activity/getActivityList?pageNo=1&pageSize=100',function(res) {
        success(res)
    })
}
 
module.exports = {
    getActivities : getActivities
}

如上，在使用httpUtil時， 處理token過期的過程是透明的 ，細節封裝到了內部。同時業務方也省去了設定token，token過期處理，baseUrl等樣板程式碼。

使用Promise封裝回調函式

我們可以使用Promise，省去在呼叫請求介面時，傳入回撥函式。

const get = (params) => {
    var _token = getApp().getToken()
    return new Promise((resolve,reject) => {
      wx.request({
        method:'GET',url: concatUrl(params),header:{
          'Authorization': _token,success: (res) => {
          checkAuth(res) // 在此處統一攔截token過期，跳轉到登入介面
          resolve(res)
        },fail:(err) => {
          console.log("請求失敗")
          reject(err)
        }
      })
    })
}

使用方法：

// service層，定義網路介面
function getActivities() {
    return HttpUtil.get({
        url: 'meetup/api/v1/activity/getActivityList?pageNo=1&pageSize=100'
    })
}
    /**
     * 載入活動列表（其中先載入群組以得到活動的頭像）
     */
    fetchGroupAndActivities: function(){
      if(this.data.isLogin) {
        var that = this
        getGroups() //先載入群組列表的頭像。
        .then((res)=>{
          if(res.data.code == "10000") { 
            ...
            return getActivities()  //其次，載入活動列表
          }
        })
        .then((res)=>{ //鏈式呼叫，處理活動列表資料。
          if (res.data.code == "10000") {
          ...
          }
        })
        .catch((err) => { //統一捕獲異常。 上面then中的任意回調發送異常，會直接中斷呼叫鏈，在這裡處理。
          console.log("get act and group failed...")
        })
    }},

總結

封裝過程wx.requestAPI中，在HttpUtil內部用Promise物件封裝baseUrl，token處理等，隱藏實現細節，對外提供統一介面和支援鏈式呼叫，這是常見的門面設計模式，缺點是違背了開http://www.cppcns.com閉原則，如果新增一些攔截請求介面處理，則要修改原有的介面實現。後續可加一箇中間層，作為攔截器，用於擴充套件新功能。

到此這篇關於微信小程式如何處理token過期問題的文章就介紹到這了,更多相關小程式token過期內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！