axios源码解读（下）之网络请求和拦截器

2023-10-31 00:27:32

深入剖析axios网络请求源码

axios的网络请求源码位于request.js文件中，包含了对XMLHttpRequest的封装和对各种请求方式的实现。

function request(config) {
  // 对请求配置进行一些默认值处理
  config = mergeConfig(config);

  // 创建XMLHttpRequest对象
  const xhr = new XMLHttpRequest();

  // 设置请求头
  for (const key in config.headers) {
    xhr.setRequestHeader(key, config.headers[key]);
  }

  // 设置请求方法和请求URL
  xhr.open(config.method, config.url, true);

  // 如果需要发送数据，则设置请求体
  if (config.data) {
    xhr.send(config.data);
  } else {
    xhr.send();
  }

  // 监听请求状态变化
  xhr.onreadystatechange = function() {
    // 当请求状态为4时，表示请求完成
    if (xhr.readyState === 4) {
      // 获取请求结果
      const response = {
        data: xhr.response,
        status: xhr.status,
        statusText: xhr.statusText,
        headers: getHeaders(xhr),
        config: config
      };

      // 根据请求状态码判断请求是否成功
      if (xhr.status >= 200 && xhr.status < 300) {
        // 请求成功，执行成功回调
        config.success(response);
      } else {
        // 请求失败，执行失败回调
        config.error(response);
      }
    }
  };

  // 返回XMLHttpRequest对象
  return xhr;
}

从这段代码中，我们可以看到axios是如何封装XMLHttpRequest对象的，以及它是如何处理请求头、请求方法、请求URL和请求数据等信息的。同时，它还展示了axios是如何监听请求状态变化的，并在请求完成时执行相应的回调函数。

解密axios的拦截器机制

axios的拦截器机制位于interceptors.js文件中，它允许我们在发送请求或接收响应之前对请求或响应进行处理。

class InterceptorManager {
  constructor() {
    this.handlers = [];
  }

  // 添加拦截器
  use(fulfilled, rejected) {
    this.handlers.push({
      fulfilled: fulfilled,
      rejected: rejected
    });

    return this.handlers.length - 1;
  }

  // 移除拦截器
  eject(id) {
    if (this.handlers[id]) {
      this.handlers[id] = null;
    }
  }

  // 执行拦截器
  forEach(fn) {
    this.handlers.forEach(handler => {
      if (handler !== null) {
        fn(handler);
      }
    });
  }
}

const interceptorManager = new InterceptorManager();