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方法中抛出一个错误,代码如下:

    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

before-after-hook钩子函数的更多相关文章

  1. Flask初学者:g对象,hook钩子函数

    Flask的g对象 作用:g可以可以看作是单词global的缩写,使用“from flask import g”导入,g对象的作用是保存一些在一次请求中多个地方的都需要用到的数据,这些数据可能在用到的 ...

  2. 让你轻松掌握 Python 中的 Hook 钩子函数

    1. 什么是Hook 经常会听到钩子函数(hook function)这个概念,最近在看目标检测开源框架mmdetection,里面也出现大量Hook的编程方式,那到底什么是hook?hook的作用是 ...

  3. Vue源码后记-钩子函数

    vue源码的马拉松跑完了,可以放松一下写点小东西,其实源码讲20节都讲不完,跳了好多地方. 本人技术有限,无法跟大神一样,模拟vue手把手搭建一个MVVM框架,然后再分析原理,只能以门外汉的姿态简单过 ...

  4. Netfilter 之 钩子函数注册

    通过注册流程代码的分析,能够明确钩子函数的注册流程,理解存储钩子函数的数据结构,如下图(点击图片可查看原图): 废话不多说,开始分析: nf_hook_ops是注册的钩子函数的核心结构,字段含义如下所 ...

  5. HOOK钩子 - 钩子函数说明

    翻译参考自MaybeHelios的blog: http://blog.csdn.net/maybehelios/ 通过SetWindowsHookEx方法安装钩子,该函数指定处理拦截消息的钩子函数(回 ...

  6. GET/POST/g和钩子函数(hook)

    GET请求和POST请求: 1. get请求: * 使用场景:如果只对服务器获取数据,并没有对服务器产生任何影响,那么这时候使用get请求. * 传参:get请求传参是放在url中,并且是通过`?`的 ...

  7. Net实现钩子函数(Hook)以及通过SendMessage实现自动点击按钮和给文本框赋值

    1.实现钩子函数 钩子(Hook)的实现需要三个主要的函数和一个委托 [DllImport("user32.dll", CharSet = CharSet.Auto, Callin ...

  8. Cypress系列(9)- Cypress 编写和组织测试用例篇 之 钩子函数Hook

    如果想从头学起Cypress,可以看下面的系列文章哦 https://www.cnblogs.com/poloyy/category/1768839.html Hook 就是常说的钩子函数,在 pyt ...

  9. Hive Query生命周期 —— 钩子(Hook)函数篇

    无论你通过哪种方式连接Hive(如Hive Cli.HiveServer2),一个HQL语句都要经过Driver的解析和执行,主要涉及HQL解析.编译.优化器处理.执行器执行四个方面. 以Hive目前 ...

  10. 【Mocha.js 101】钩子函数

    前情提要 在上一篇文章<[Mocha.js 101]同步.异步与 Promise>中,我们学会了如何对同步方法.异步回调方法以及 Promise 进行测试. 在本篇文章中,我们将了解到 M ...

随机推荐

  1. 使用docker方式安装wordpress

    mkdir -p /home/my_wordpress cd my_wordpress/ vim docker-compose.yml version: '3.3' services: db: ima ...

  2. CentOS7内置Realtek网卡驱动r8169降级r8168

    前几天装了几台服务器测试,在使用的过程中发现,每次重启系统,登录界面会弹出网卡提示  "r8169 0000:02:00 eth0 Invalid ocp reg 17758!" ...

  3. Spring mvc源码分析系列--Servlet的前世今生

    Spring mvc源码分析系列--Servlet的前世今生 概述 上一篇文章Spring mvc源码分析系列--前言挖了坑,但是由于最近需求繁忙,一直没有时间填坑.今天暂且来填一个小坑,这篇文章我们 ...

  4. 鸟哥linux私房菜习题总结

    第零章 1.请找出世界上跑得最快的超级计算机的相关信息? 系统名称:天河二号. 所在位置:中国广州中山大学超算中心. 使用的cpu型号与规格:采用的是Intel的Ivy Bridge处理器与Xeon ...

  5. nginx 通过IP访问项目

    项目新需求,因为是小范围使用的网站,所以不打算配域名,直接通过IP访问当前项目. 环境: LNMP 一键集成环境 当前IP指向的目录 :/home/wwwroot/default/ 但是我的项目.需要 ...

  6. Vue中组件化编码使用、实现组件之间的参数传递(实战练习二)

    上一章节实现的是静态页面的设计.这一章节实现将数据抽取出来.通过组件间参数的传递来实现 上一章节链接地址:https://blog.csdn.net/weixin_43304253/article/d ...

  7. resutful的使用和增强版的swagger2

    1.REST的特征 统一接口:客户和服务器之间通信的方法必须统一,RESUTFUL风格的数据元操作CRUD分别对应HTTP方法----GET用来获取数据源,POST用来新建资源,PUT用来更新资源,, ...

  8. AI人脸识别+换脸

    视频换脸可参考 https://github.com/iperov/DeepFaceLab import dlib.dlib as dlib import numpy import sys impor ...

  9. Vue2基础知识学习

    Vue2基础知识学习 01.初识 new Vue({ el: '#root', //用于指定当前Vue实例为哪个容器服务,值通常为css选择器符 data () { return { } } }); ...

  10. Java安全之Resin2内存马

    Java安全之Resin2内存马 环境 resin2.1.17 添加Filter分析 依然是web.xml注册一个filter,debug进去看注册流程 debug dofilter逻辑时看到如下代码 ...