溫馨提示×

您好，登錄后才能下訂單哦！

密碼登錄×
登錄注冊(cè)×
其他方式登錄
點(diǎn)擊 登錄注冊(cè) 即表示同意《億速云用戶服務(wù)條款》

小程序如何自主實(shí)現(xiàn)攔截器的示例代碼

發(fā)布時(shí)間：2020-10-16 07:39:18 來源：腳本之家 閱讀：204 作者：binnng 欄目：web開發(fā)

在一些框架中發(fā)現(xiàn)會(huì)提供一個(gè)很實(shí)用的功能：攔截器（interceptor）。例如要實(shí)現(xiàn)這個(gè)需求：小程序每次獲取到定位后都存到 globalData 里：

wx.getLocation({
 // ..
 success(res) {
  getApp().globalData.location = res
  // ...
 }
})

如果每一處使用 wx.getLocation 的地方都這么寫也沒啥大問題，但總顯得不夠“智能”，一方面是多了重復(fù)代碼，另一方面如果需求變動(dòng)，獲取到定位后存到別的地方，那要改很多次。

優(yōu)雅的攔截器

有了攔截器，可以更優(yōu)雅的實(shí)現(xiàn)它：

intercept('getLocation', {
 success(res) {
  getApp().globalData.location = res
 }
})

只要在一處定義如上的攔截器，其他地方直接用 wx.getLocation 即可。那么，如何實(shí)現(xiàn)上面的方式呢？

實(shí)現(xiàn) intercept 方法

// utils/intercept.js
// 存儲(chǔ)攔截器定義
var interceptors = {}
function intercept(key, config) {
 intercept[key] = config
}
export {
 intercept,
 interceptors
}

很簡單，暴露出 intercept 方法，定義一個(gè)存儲(chǔ)器也一并暴露出去。

代理 wx

要實(shí)現(xiàn)使用 wx.getLocation 自動(dòng)應(yīng)用攔截器，就必須基于原有方法重新定義它。

import { interceptors } from './intercept'

// 備份原有微信方法
var wxBackup = {}
[
 'getLocation'
 // 還可以有很多其他方法 ...
].forEach((key) => {
 wxBackup[key] = wx[key]
 wx[key] = (config) => {
  if (interceptors[key]) {
   // 備份業(yè)務(wù)代碼傳入的回調(diào)方法
   var backup = {}
   var interceptor = interceptors[key]
   [
    'success',
    'fail',
    'complete'
   ].forEach((k) => {
    backup[k] = config[k]
    config[k] = (res) => {
     interceptor[k](res)
     backup[k](res)
    }
   })
  }
  wxBackup[key](config)
 }
})

當(dāng)然，上述代碼用數(shù)組列出了所有可能被定義攔截器的微信函數(shù)，也可以使用 Object.keys(wx) 通用處理。

更多使用場景

上面的場景比較簡單，攔截器的應(yīng)用還有更多場景。比如每次請(qǐng)求傳參帶上公參經(jīng)緯度，接口返回的數(shù)據(jù)都會(huì)約定包裹在 object 中，請(qǐng)求回來需要取一遍。數(shù)據(jù)異常時(shí)還要針對(duì)錯(cuò)誤碼做特定處理，就可以很方便的用攔截器處理：

intercept('request', {
 data(data) {
  var location = getApp().globalData.location
  data.location = location.latitude + ',' + location.longitude
  return data
 },
 success(res) {
  if (res.code == 200) {
   return res.object
  } else {
   if (res.code == 'xxx') {
    // 登錄失效，重新登錄
    // ....
   }
  }
 }
})

注意，攔截器函數(shù)里多了返回值，具體實(shí)現(xiàn)方法就不多寫，基于上述實(shí)現(xiàn)完善代碼即可。

總結(jié)

細(xì)心的讀者可能發(fā)現(xiàn)，我們代理或者改造了很多微信提供的方法，有些開發(fā)者可能不喜歡這樣，希望保持原有代碼的純潔性。這要看團(tuán)隊(duì)喜好吧，基于此考慮，主要是不想定義太多新的方法或 api，盡量以大家最為熟悉的方式書寫代碼。

以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持億速云。

向AI問一下細(xì)節(jié)

免責(zé)聲明：本站發(fā)布的內(nèi)容（圖片、視頻和文字）以原創(chuàng)、轉(zhuǎn)載和分享為主，文章觀點(diǎn)不代表本網(wǎng)站立場，如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱：is@yisu.com進(jìn)行舉報(bào)，并提供相關(guān)證據(jù)，一經(jīng)查實(shí)，將立刻刪除涉嫌侵權(quán)內(nèi)容。

AI
助
手