詳解JavaScript中的before-after-hook鉤子函數(shù)

更新時(shí)間：2022年12月15日 13:55:51 作者：nd

最近看別人的代碼，接觸到一個(gè)插件，before-after-hook，百度搜一圈也沒(méi)有看到什么地方有教程,本文就來(lái)簡(jiǎn)單介紹一下這個(gè)插件的使用方法，需要的可以參考一下

before-after-hook

最近看別人的代碼，接觸到一個(gè)插件，before-after-hook，百度搜一圈也沒(méi)有看到什么地方有教程，看這個(gè)字面意思是一個(gè)hook，和axios里面的攔截器，vue-router里面的導(dǎo)航守衛(wèi)類(lèi)似。插件名字暫且叫它“前后鉤子”吧，本文簡(jiǎn)單介紹這個(gè)插件的使用方法。

1.單獨(dú)的鉤子

先看一個(gè)簡(jiǎn)單的例子，代碼如下：

  import Hook from 'before-after-hook'
  const hook = new Hook.Singular()

  function getData(options) {
    const result = hook(fetchData, options)
  }
  //設(shè)置鉤子
  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)
  }

輸出結(jié)果如下圖1：

從結(jié)果可以看出，在執(zhí)行fetchData方法的時(shí)候，先去執(zhí)行beforeHook，執(zhí)行完fetchData語(yǔ)句的時(shí)候，又執(zhí)行了afterHook。如果在執(zhí)行fetchData的時(shí)候拋出一個(gè)錯(cuò)誤，會(huì)觸發(fā)errorHook，只需在上面的fetchData方法中拋出一個(gè)錯(cuò)誤，代碼如下：

    console.log('getData', options)
    throw new Error('error')
    return options
  }

執(zhí)行結(jié)果如下圖2:

從執(zhí)行結(jié)果上可以看到當(dāng)fetchData方法報(bào)錯(cuò)的時(shí)候會(huì)觸發(fā)errorHook。

before-after-hook簡(jiǎn)單用法就是先用鉤子鉤住一個(gè)方法，然后再設(shè)置這個(gè)鉤子的處理函數(shù)：beforeHook，errorHook，afterHook，對(duì)應(yīng)的在這個(gè)方法調(diào)用之前，調(diào)用出錯(cuò)，調(diào)用之后觸發(fā)相應(yīng)的鉤子函數(shù)。

2.Hook collection

Hook.Colleciton和Hook.Singuar本質(zhì)上沒(méi)有什么不同，Hook.Collection創(chuàng)建的鉤子來(lái)處理一些有相同的名稱(chēng)的鉤子。對(duì)于這兩種鉤子，他們的執(zhí)行順序如下：

beforeHook
fecchFromDatabase
afterHook
handleData

來(lái)看下面的代碼

  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)
  }

輸出結(jié)果如下圖3：

beforeHook可以在將請(qǐng)求參數(shù)傳遞給fetchDatabase的時(shí)候修改傳入的參數(shù)。

在beforeHook和fetchFromDatabase的時(shí)候如果有錯(cuò)誤，觸發(fā)errorHook。

如果再afterHook里出現(xiàn)錯(cuò)誤，會(huì)調(diào)用handleGetError，而不是afterHook，handleData。

注意他們的名字必須一致，不然會(huì)執(zhí)行不到。

到此這篇關(guān)于詳解JavaScript中的before-after-hook鉤子函數(shù)的文章就介紹到這了,更多相關(guān)JavaScript before-after-hook鉤子函數(shù)內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: