背景

为了满足老板的需求，需要往公司采购的一个第三方系统里注入脚本，拦截所有的请求，支持修改请求参数和响应参数。

所谓的注入脚本，就是往index.html里插入script标签，执行相应的代码，可以通过nginx去实现。

因第三方系统用的都是fetch请求，所以本文主要讲解fetch请求的拦截

在实现拦截器之前，先回顾一下Fetch的用法

Fetch基本使用

fetch等同于我们常用的XMLHttpRequest，用来发送HTTP请求获取资源，但Fetch设计得更加简洁易用，并基于Promise实现，解决了XMLHttpRequest的回调地狱问题

语法

 Promise<Response> fetch(input[, init]); 

参数

fetch方法接收两个参数：

• input 可以是字符串或者Request对象
• init（可选）一个配置项对象，包括所有对请求的设置

返回值

fetch方法会返回一个Promise，resolve时回传Response对象

示例

// GET请求
fetch('http://example.com/movies.json?name=example')
    .then(res => res.json)
    .then(data => console.log(data))

// POST请求
const data = { username: 'example' };

fetch('https://example.com/profile', {
  method: 'POST', // or 'PUT'
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(data),
})
.then(response => response.json())
.then(data => {
  console.log('Success:', data);
})
.catch((error) => {
  console.error('Error:', error);
});

// Request对象
let request = new Request('http://example.com/movies.json', {
    method: 'POST',
    body: '{name: example}'
})

fetch(request).then(res => res.json)

Request第二个参数和fetch方法的init参数一致

拦截器设计

拦截器的目的是在原生的fetch基础之上，新增拦截请求的功能。所以我们可以重新写一个fetch方法，让window.fetch = hijackFetch。这样第三方系统里调用fetch方法，就会走到hijackFetch里

从fetch的语法和参数来看，我们可以知道：

• fetch是一个函数
• 接收两个参数，第一个参数定义要获取的资源（也可以是Request对象）。第二个参数为可选项，一个配置项对象，包括所有对请求的设置；
• 返回结果是一个promise对象。

在实现hijackFetch前，我们先来思考如何添加拦截器，这里参考axios的拦截器用法

// 请求拦截
hijackFetch.interceptor.request.use('/api/example', function(request) {
    // do something
    return request
})

// 响应拦截
hijackFetch.interceptor.response.use('/api/example', function(response) {
    // do something
    return response
})

和axios的拦截器不同，因为业务需求不需要对所有的fetch请求进行拦截，仅针对某几个特定的接口拦截，所以拦截器接收两个参数：

• 接口地址
• 回调函数

代码框架

var request = (function() {
  var originalFetch = window.fetch;
   
  var interceptor_req = {
      // url1: [callback1, callback2,...], 
      // url2: [] 
  }; 
    
  var interceptor_res = {
      // url1: [callback1, callback2,...], 
      // url2: [] 
  };
    
   function hijackFetch() {
       // ...
   }
    
   hijackFetch.interceptor = {
        // 请求拦截
        request: {
            use: function(url, callback) {
                // ...
            }
        },
        // 响应拦截
        response: {
            use: function(url, callback) {
                // ...
            }
        }
    }
    
    return {
        hijackFetch: hijackFetch
    }
})()

主要思路：

1. 维护interceptor_req和interceptor_res两个对象，数据结构为{url: [callback]}的形式。

2. 调用拦截器的use方法时，将callback函数push到对应的队列里。

3. 在发起请求前和获取响应后执行该请求对应的callback队列，修改request和response

完整代码

var qbi_request = (function () {
  var originalFetch = window.fetch;
  var originalRequest = window.Request;

  // Request实例取不到body参数
  function Request(input, init){
      this.input = input;
      this.init = init;

      this.req = new originalRequest(input, init);

      for(var key in this.req){
          this[key] = this.req[key];
      }
  }

  window.Request = Request;

  var interceptor_req = {};
  var interceptor_res = {};

  function getPath(url) {
    return url.split("?")[0]
  }

  function hijackFetch() {
    var request = null
    if(typeof arguments[0] === 'string') {
      request = new Request(arguments[0], arguments[1] || {}) 
    } else {
      request = new Request(arguments[0].input, arguments[0].init)
    }

    var path = getPath(request.input)
    if(interceptor_req[path]) {
      // 清空队列，避免跳转页面后，重复执行callback
      // 这里的循环是请求拦截的关键代码，循环执行拦截器的回调方法，修改request
      while(fn = interceptor_req[path].shift()) {
        request = fn(request)
      }
    }

    return new Promise((resolve, reject) => {
      originalFetch(request.input, request.init)
        .then((res) => {
          var path = getPath(request.input)
          if(interceptor_res[path]) {
            // 这里的循环是响应拦截的关键代码，循环执行拦截器的回调方法，修改res
            while(fn = interceptor_res[path].shift()) {
              res = fn(res)
            }
          }

          resolve(res);
        })
        .catch((err) => {
          reject(err);
        });
    });
  }

  hijackFetch.interceptor = {
    request: {
      use: function (url, callback) {
        if(interceptor_req[url]) {
          interceptor_req[url].push(callback)
        } else {
          interceptor_req[url] = [callback]
        }
      },
    },
    response: {
      use: function (url, callback) {
        if(interceptor_res[url]) {
          interceptor_res[url].push(callback)
        } else {
          interceptor_res[url] = [callback]
        }
      },
    },
  };

  window.fetch = hijackFetch;

  return {
    hijackFetch: hijackFetch,
  };
})();

通过Request调用fetch方法的话，Request实例获取不到body对象，即获取不到请求参数，这样拦截也没有意义。所以对Request这个类也进行了重写，新增init属性，在new Request时将参数保存起来