溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
在一些框架中發現會提供一個很實用的功能：攔截器（interceptor）。例如要實現這個需求：小程序每次獲取到定位后都存到 globalData 里：
wx.getLocation({
// ..
success(res) {
getApp().globalData.location = res
// ...
}
})
如果每一處使用 wx.getLocation 的地方都這么寫也沒啥大問題，但總顯得不夠“智能”，一方面是多了重復代碼，另一方面如果需求變動，獲取到定位后存到別的地方，那要改很多次。
優雅的攔截器
有了攔截器，可以更優雅的實現它：
intercept('getLocation', {
success(res) {
getApp().globalData.location = res
}
})
只要在一處定義如上的攔截器，其他地方直接用 wx.getLocation 即可。那么，如何實現上面的方式呢？
實現 intercept 方法
// utils/intercept.js
// 存儲攔截器定義
var interceptors = {}
function intercept(key, config) {
intercept[key] = config
}
export {
intercept,
interceptors
}
很簡單，暴露出 intercept 方法，定義一個存儲器也一并暴露出去。
代理 wx
要實現使用 wx.getLocation 自動應用攔截器，就必須基于原有方法重新定義它。
import { interceptors } from './intercept'
// 備份原有微信方法
var wxBackup = {}
[
'getLocation'
// 還可以有很多其他方法 ...
].forEach((key) => {
wxBackup[key] = wx[key]
wx[key] = (config) => {
if (interceptors[key]) {
// 備份業務代碼傳入的回調方法
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)
}
})
當然，上述代碼用數組列出了所有可能被定義攔截器的微信函數，也可以使用 Object.keys(wx) 通用處理。
更多使用場景
上面的場景比較簡單，攔截器的應用還有更多場景。比如每次請求傳參帶上公參經緯度，接口返回的數據都會約定包裹在 object 中，請求回來需要取一遍。數據異常時還要針對錯誤碼做特定處理，就可以很方便的用攔截器處理：
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') {
// 登錄失效，重新登錄
// ....
}
}
}
})
注意，攔截器函數里多了返回值，具體實現方法就不多寫，基于上述實現完善代碼即可。
總結
細心的讀者可能發現，我們代理或者改造了很多微信提供的方法，有些開發者可能不喜歡這樣，希望保持原有代碼的純潔性。這要看團隊喜好吧，基于此考慮，主要是不想定義太多新的方法或 api，盡量以大家最為熟悉的方式書寫代碼。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持億速云。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
