前端通过增加XHR钩子来全局增加header

2023-12-29 13:18:56

引言

前端通过修改 XHR 原型来全局增加 header 是采用 XMLHttpRequest 加 hook 方式实现一个简单业务场景。这样可以提高代码的可维护性和可扩展性,减少重复代码的编写。

比如,在用户登录后,后端返回了一个 token,前端需要在发送的每个请求中都携带这个 token 以进行认证。通过修改 XHR 原型来全局增加 header,可以实现全局性的认证信息添加,无需在每个请求中手动设置 header。

模拟接口请求 mock 参数的时候也需要全局拦截 xhr 请求,这个时候就需要 hook 对应的 send、open 函数了。

hook钩子函数

在JavaScript中,“hook”(钩子)是一种编程模式,它允许开发者在特定的代码执行点插入自定义的逻辑。钩子函数是用于在这些执行点执行自定义逻辑的函数。

钩子函数通常被设计成可拦截或修改某个操作的执行流程。它们允许开发者在关键步骤中插入自定义的代码,以满足特定的需求,例如添加额外的验证、修改数据、记录日志等。

在JavaScript中,钩子函数可以通过以下两种方式实现:

使用原生提供的钩子函数:有些JavaScript库或框架提供了一些特定的钩子函数,供开发者在特定的时机插入自己的代码。例如,在Vue.js中,可以使用created钩子函数在实例被创建后执行自定义逻辑。

new Vue({
  created() {
    // 自定义逻辑
  }
});

自定义钩子函数:开发者可以根据需要在自己的代码中定义钩子函数。这些钩子函数可以是普通的函数,在代码的特定位置被调用。例如,在一个JavaScript类中,可以定义一个钩子方法,用于执行一些特定的逻辑。

class MyClass {
  constructor() {
    // 构造函数
    console.log('构造器创建')
  }

  beforeMethod() {
    // 在方法执行之前执行的钩子函数
    console.log('执行beforeMethod')
  }

  myMethod() {
    this.beforeMethod(); // 在方法执行之前调用钩子函数
    // 方法的实际逻辑
    console.log('方法的实际逻辑')
    this.afterMethod(); // 在方法执行之后调用钩子函数
  }

  afterMethod() {
    // 在方法执行之后执行的钩子函数
    console.log('执行afterMethod')
  }
}

const instance = new MyClass();
instance.myMethod(); // 执行方法,同时触发钩子函数

通过使用钩子函数,开发者可以在适当的时机执行自定义的逻辑,以满足特定的需求。这种模式提供了更大的灵活性和可扩展性,并允许代码的修改不影响原有的执行流程。

给XHR增加钩子函数

通过hook方式实现修改XMLHttpRequest的send或者open函数来全局增加header。

方式一,采用闭包修改钩子函数:

(function (open, send) {
  XMLHttpRequest.prototype.open = function () {
    open.apply(this, arguments);
  };
  XMLHttpRequest.prototype.send = function () {
    /**
     * 接口请求前增加自定义业务逻辑处理
     */
    this.setRequestHeader("diyHeader", "diyHeader666666666");
    send.apply(this, arguments);
  };
})(XMLHttpRequest.prototype.open, XMLHttpRequest.prototype.send);

方式二,通过hook自定义函数修改:

function hookXhr(func) {
  const origin = func;
  return function () {
    // arguments 是一个对应于传递给函数的参数的类数组对象。
    console.log(arguments);
    this.setRequestHeader("diyHeader", "diyHeader666666666");
    return origin.apply(this, arguments);
  };
}
XMLHttpRequest.prototype.send = hookXhr(XMLHttpRequest.prototype.send);
// XMLHttpRequest.prototype.open = hookXhr(XMLHttpRequest.prototype.open);

tips

编程语言中,比如 Java,是支持将方法声明为私有的,即它们只能被同一个类中的其他方法所调用。

而 JavaScript 没有这种原生支持,但我们可以使用闭包来模拟私有方法。私有方法不仅仅有利于限制对代码的访问:还提供了管理全局命名空间的强大能力,避免非核心的方法弄乱了代码的公共接口部分。

下面的示例展现了如何使用闭包来定义公共函数,并令其可以访问私有函数和变量。这个方式也称为模块模式(module pattern):

var makeCounter = function () {
  var privateCounter = 0;
  function changeBy(val) {
    privateCounter += val;
  }
  return {
    increment: function () {
      changeBy(1);
    },
    decrement: function () {
      changeBy(-1);
    },
    value: function () {
      return privateCounter;
    },
  };
};

var Counter1 = makeCounter();
var Counter2 = makeCounter();
console.log(Counter1.value()); /* logs 0 */
Counter1.increment();
Counter1.increment();
console.log(Counter1.value()); /* logs 2 */
Counter1.decrement();
console.log(Counter1.value()); /* logs 1 */
console.log(Counter2.value()); /* logs 0 */

请注意两个计数器 Counter1 和 Counter2 是如何维护它们各自的独立性的。每个闭包都是引用自己词法作用域内的变量 privateCounter 。

每次调用其中一个计数器时,通过改变这个变量的值,会改变这个闭包的词法环境。然而在一个闭包内对变量的修改,不会影响到另外一个闭包中的变量。

参考

文章来源:https://blog.csdn.net/sunzroad/article/details/135247200
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。