before-after-hook
最近看別人的程式碼，接觸到一個外掛，before-after-hook，百度搜一圈也沒有看到什麼地方有教程，看這個字面意思是一個hook，和axios裡面的攔截器，vue-router裡面的導航守衛類似。外掛名字暫且叫它“前後鉤子”吧，本文簡單介紹這個外掛的使用方法。
1.單獨的鉤子
先看一個簡單的例子，程式碼如下：
import Hook from 'before-after-hook'
const hook = new Hook.Singular()
function getData(options) {
const result = hook(fetchData, options)
}
//設定鉤子
hook.before(beforHook)
hook.error(errorHook)
hook.after(afterHook)
getData({id: 123})
function fetchData(options) {
console.log('fetchData', options)
return options
}
function handleData(res) {
}
function handleGetError(e) {
}
function beforHook(e) {
console.log('beforHook', e)
}
function errorHook(e) {
console.log('errorHook', e)
}
function afterHook(e) {
console.log('afterHook', e)
}
輸出結果如下圖1：
從結果可以看出，在執行fetchData方法的時候，先去執行beforeHook，執行完fetchData語句的時候，又執行了afterHook。如果在執行fetchData的時候丟擲一個錯誤，會觸發errorHook，只需在上面的fetchData方法中丟擲一個錯誤，程式碼如下：
function fetchData(options) {
console.log('getData', options)
throw new Error('error')
return options
}
執行結果如下圖2:
從執行結果上可以看到當fetchData方法報錯的時候會觸發errorHook。
before-after-hook簡單用法就是先用鉤子鉤住一個方法，然後再設定這個鉤子的處理函式：beforeHook，errorHook，afterHook，對應的在這個方法呼叫之前，呼叫出錯，呼叫之後觸發相應的鉤子函式。
2.Hook collection
Hook.Colleciton和Hook.Singuar本質上沒有什麼不同，Hook.Collection建立的鉤子來處理一些有相同的名稱的鉤子。對於這兩種鉤子，他們的執行順序如下：
- beforeHook
- fecchFromDatabase
- afterHook
- handleData
來看下面的程式碼
import Hook from 'before-after-hook'
const hookCollection = new Hook.Collection()
function getData(options) {
try {
hookCollection('get', fetchData, options)
handleData(options)
} catch (e) {
handleGetError(e)
}
}
hookCollection.before('get', beforHook)
hookCollection.error('get', errorHook)
hookCollection.after('get', afterHook)
getData({id: 123})
function fetchData(options) {
console.log('getData', options)
return options
}
function beforHook(e) {
console.log('beforHook', e)
}
function errorHook(e) {
console.log('errorHook', e)
}
function afterHook(e) {
console.log('afterHook', e)
}
function handleData(data) {
console.log('handleData', data)
}
function handleGetError(e) {
console.log('handleGetError', e)
}
輸出結果如下圖3：
beforeHook可以在將請求引數傳遞給fetchDatabase的時候修改傳入的引數。
在beforeHook和fetchFromDatabase的時候如果有錯誤，觸發errorHook。
如果再afterHook裡出現錯誤，會呼叫handleGetError，而不是afterHook，handleData。
注意他們的名字必須一致，不然會執行不到。