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創建的鉤子來處理一些有相同的名稱的鉤子。對于這兩種鉤子，他們的執行順序如下：

1. beforeHook
2. fecchFromDatabase
3. afterHook
4. 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。
注意他們的名字必須一致，不然會執行不到。

參考文檔：https://www.npmjs.com/package/before-after-hook