axios拦截器工作方式及原理源码解析

axios拦截器工作方式及原理源码解析

什么是拦截器

在介绍拦截器的工作方式及原理源码解析之前，我们首先需要了解什么是拦截器。

在axios中，拦截器分为请求拦截器和响应拦截器，它们分别对发出的请求和返回的响应进行拦截处理。

请求拦截器

请求拦截器允许我们在请求被发送之前对其进行处理，这包括检查请求配置、转换请求数据等操作。

axios.interceptors.request.use(function (config) {
  // 在发送请求之前对请求进行处理
  return config;
}, function (error) {
  // 当请求出错的时候执行的操作
  return Promise.reject(error);
});

在上面的代码中，我们使用了axios.interceptors.request.use方法注册了一个请求拦截器。它的第一个参数是一个函数，它会在发送请求之前被调用，参数config是请求的配置对象，我们可以在这里对请求进行处理。

拦截器可以被多次注册，它们会按照注册的顺序依次执行。因此，如果我们需要多次处理请求，可以注册多个拦截器。

响应拦截器

响应拦截器允许我们在请求响应之后对其进行处理，这包括检查响应状态、转换响应数据等操作。

axios.interceptors.response.use(function (response) {
  // 对响应的数据进行处理
  return response;
}, function (error) {
  // 当响应出错的时候执行的操作
  return Promise.reject(error);
});

在上面的代码中，我们使用了axios.interceptors.response.use方法注册了一个响应拦截器。它的第一个参数也是一个函数，它会在接收到响应之后被调用，参数response是响应对象，我们可以在这里对响应进行处理。

同样的，响应拦截器也可以被多次注册，它们会按照注册的顺序依次执行。

源码解析

了解了拦截器的基本概念后，我们现在来看一下axios是如何实现拦截器的。

在axios中，发送请求的方法是axios.request，我们可以查看这个方法的源码来了解拦截器的实现原理。

  function wrap(fn) {
    return function wrapLogic(config) {
      // 在发送请求之前依次执行请求拦截器
      for (var i = 0; i < interceptors.request.length; i++) {
        config = interceptors.request[i](config);
      }
      // 发送请求
      var promise = fn(config);
      // 在响应到达之后依次执行响应拦截器
      for (var i = 0; i < interceptors.response.length; i++) {
        promise = promise.then(interceptors.response[i], interceptors.response[i]);
      }
      return promise;
    };
  }

在上面的源码中，定义了一个wrap函数，这个函数返回了一个新的函数wrapLogic，这个新的函数就是我们实际上调用的方法。

在wrapLogic函数中，我们先依次执行了请求拦截器，在发送请求之前处理请求。在请求被发送之后，我们调用fn函数发送请求，fn函数返回的是一个Promise对象，它会等待请求的响应到达。

当响应到达之后，我们再依次执行响应拦截器，对响应进行处理。最后，我们返回Promise对象，供调用方使用。

示例说明

请求拦截器示例

在某个应用中，我们需要在每个请求中添加一个Token，用于身份验证。

我们可以在请求拦截器中添加一个Authorization请求头，并将Token作为值传入，代码如下：

axios.interceptors.request.use(function (config) {
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  return config;
}, function (error) {
  return Promise.reject(error);
});

在上面的代码中，我们通过localStorage获取Token的值，并将其添加到Authorization请求头中。

响应拦截器示例

在某个应用中，我们请求的数据都是JSON格式的，但是在有些情况下，服务器会返回一个非JSON格式的响应，例如一个错误页面。

我们可以在响应拦截器中检查响应的Content-Type类型，如果不是JSON类型，我们就返回一个错误，示例代码如下：

axios.interceptors.response.use(function (response) {
  if (response.headers['content-type'] !== 'application/json') {
    return Promise.reject(new Error('Invalid response content type'));
  }
  return response;
}, function (error) {
  return Promise.reject(error);
});

在上面的代码中，我们检查了响应的Content-Type头，如果不是application/json，我们就返回一个错误。反之，我们返回响应对象，让调用方继续处理响应。