axios 是前端最常使用的 http 请求库，我们通过源码了解 axios 如何实现的，了解 axios 的一些设计思想。

前置知识

xmlHttpRequest

XMLHttpRequest（XHR）对象是把Ajax推到历史舞台上的关键技术，这个对象最早由微软发明，然后被其他浏览器所借鉴。

我们来看看 XHR 的基础使用：

首先要创建一个xhr对象

const xhr = new XMLHttpRequest();

调用open方法，这个方法接受三个参数请求类型(get、post)请求URL，以及表示请求是否异步的布尔值_(注意，调用open并不会实际发送请求，而只是做好准备)_

xhr.open('GET', url, false);

send方法，实际发送请求,参数表示发送的数据

xhr.send(null);

因为这个请求是同步的，所以JavaScript代码会等待服务器响应之后再继续执行。收到响应后，xhr对象的以下属性将被填充。

responseText：作为响应体返回的文本。
responseXML：如果响应的内容类型是"text/xml"或"application/xml"，那就是包含响应数据的XML DOM文档。
status：响应的HTTP状态。
statusText：响应的HTTP状态描述。

javascript

if((xhr.status>=200&&xhr.status<300)||xhr.status==304){
  alert(xhr.responseText);
}else{
  alert("Requestwasunsuccessful: "+xhr.status);
}

上边的方式使用了同步请求的方式，但大多数时候，我们最好使用异步请求。XHR对象有一个readyState属性，表示当前处在请求/响应过程的哪个阶段，通过结合 XHR 的readystatechange事件监听程序我们可以实现监听异步请求的响应状态。

javascript

let xhr = new XMLHttpRequest();
xhr.onreadystatechange = function() {
  if (xhr.readyState == 4) {
    if ((xhr.status >= 200 && xhr.status < 300) || xhr.status == 304) {
      alert(xhr.responseText);
    } else {
      alert("Request was unsuccessful: " + xhr.status);
    }
  }
};
xhr.open("get", "example.txt", true);
xhr.send(null);

在收到响应之前如果想取消异步请求，可以调用abort()方法：

xhr.abort();

Fetch

Fetch API能够执行XMLHttpRequest对象的所有任务，但更容易使用，接口也更现代化，能够在Web工作线程等现代Web工具中使用。

javascript

// Fetch方式
fetch(url)
  .then(response => response.json())
  .then(data => console.log(data));

一些待整理问题

Q:❓设置responseType的作用？ fetch api中不需要设置吗？

A:
XMLHttpRequest：通过设置 responseType，浏览器会在收到响应后自动按照指定类型解析数据。
fetch API：浏览器不会在收到响应后自动解析数据，而是等待开发者调用特定的响应处理方法（如 response.json() 或 response.blob()）来触发解析操作。

Axios vs. Fetch (2025 update): Which should you use for HTTP requests? - LogRocket Blog

axios 入门

Axios 是一个基于 promise 网络请求库，它支持以下特性：

支持浏览器和 node 环境
基于 promise

首先在项目中安装 axios 后，引入 axios：

import axios from 'axios'

axios 提供了两种发送 http 请求的 api：

一种是直接调用 axios(config)，传入配置项；
另外一种是 axios 提供的快捷方式，如 axios.get(config)、axios.post(config)等，直接发送不同类型的 http 请求。(其实两种方式在使用上只是后者的传入的配置项中不需要传入_method_配置。)

个人看法我们只需要使用第一种即可，没有必要去记这些 api；

我们来看看直接调用 axios(config)发送 http 请求的使用方式，需要传入url、method以及data、params等请求体（视是否有请求体）

javascript

// 发送get请求
axios({
  method: 'get',
  url: '/user/12345',
  // 需要注意的是，get请求通过params传递请求参数
  params: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});
// 发送post请求
axios({
  method: 'post',
  url: '/user/12345',
  // 需要注意的是，post请求通过params传递请求参数
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
});

Axios 实例与配置

axios 请求支持很多配置项，包括baseUrl、header、proxy等，而我们在业务开发中，会写很多的请求方法，而这些请求方法往往具有很多相同的请求配置，比如说baseUrl、header等。

Axios 设计了instance实例这个概念，instance可以持有一份通用的配置，而针对不同的接口请求，我们通过传递配置来覆盖。

同时instance还可以设置拦截器，也适用于通过instance调用的实例方法。

通过 axios.create([config])函数可以创建 Axios 实例，Axios 实例上也持有request、get、post等请求方法。

注意，Axios 实例本质上也是一个"函数"对象，所以可以直接让 Axios 实例既可以作为函数调用，又可以使用对象方法，

javascript

const request = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});
// request
request({
  method: 'post',
  url: '/user/12345',
  // 需要注意的是，post请求通过params传递请求参数
  data: {
    firstName: 'Fred',
    lastName: 'Flintstone'
  }
})

axios 请求方法支持传入很多配置项，而在实际开发中，我们经常会遇到需要发送大量 HTTP 请求（接口）的场景，而这些请求通常会共享一些通用的配置，比如 baseURL、headers 或 timeout。Axios 提供了一种优雅的方式来管理这些通用配置，即通过实例化 Axios。
Axios 提供了一个 create 方法，可以用来创建一个自定义的 Axios 实例。这个实例会保存一份通用的配置，所有基于该实例的请求都会继承这些配置。如果需要针对特定接口覆盖某些配置，可以直接在请求时传递新的配置。

创建一个 Axios 实例代码如下：

javascript

// 创建一个 Axios 实例
const request = axios.create({
  baseURL: 'https://some-domain.com/api/', // 公共基础 URL
  timeout: 1000, // 请求超时时间
  headers: { 'X-Custom-Header': 'foobar' } // 默认请求头
});

如何使用实例发送请求？
Axios 实例本质上是一个函数对象，因此可以直接调用它来发送请求。此外，实例还提供了 get、post、put 等方法，方便直接使用。

javascript

// 使用实例发送 POST 请求
request({
  method: 'post',
  url: '/user/12345',
  data: {
 firstName: 'Fred',
 lastName: 'Flintstone'
  }
});

或者直接调用实例的请求方法：

javascript

配置覆盖:在发送请求时，可以通过传递新的配置来覆盖实例的默认配置。例如：

javascript

request({
  method: 'post',
  url: '/user/12345',
  baseURL: 'https://another-domain.com/api/', // 覆盖 baseURL
  timeout: 2000, // 覆盖 timeout
  data: {
 firstName: 'Fred',
 lastName: 'Flintstone'
  }
});

使用 Axios 实例化有以下几个好处：

减少重复代码：避免在每个请求中重复设置 baseURL、headers 等配置。
统一管理配置：便于全局修改默认行为，比如调整超时时间或添加新的请求头。

创建 Axios 实例的配置以及 Axios 发送请求的配置项如下：

javascript

{
  // `url` 是用于请求的服务器 URL
  url: '/user',

    // `method` 是创建请求时使用的方法
    method: 'get', // 默认值

    // `baseURL` 将自动加在 `url` 前面，除非 `url` 是一个绝对 URL。
    // 它可以通过设置一个 `baseURL` 便于为 axios 实例的方法传递相对 URL
    baseURL: 'https://some-domain.com/api/',

    // `transformRequest` 允许在向服务器发送前，修改请求数据
    // 它只能用于 'PUT', 'POST' 和 'PATCH' 这几个请求方法
    // 数组中最后一个函数必须返回一个字符串， 一个Buffer实例，ArrayBuffer，FormData，或 Stream
    // 你可以修改请求头。
    transformRequest: [function (data, headers) {
    // 对发送的 data 进行任意转换处理

    return data;
  }],

    // `transformResponse` 在传递给 then/catch 前，允许修改响应数据
    transformResponse: [function (data) {
    // 对接收的 data 进行任意转换处理

    return data;
  }],

    // 自定义请求头
    headers: {'X-Requested-With': 'XMLHttpRequest'},

  // `params` 是与请求一起发送的 URL 参数
  // 必须是一个简单对象或 URLSearchParams 对象
  params: {
    ID: 12345
  },

  // `paramsSerializer`是可选方法，主要用于序列化`params`
  // (e.g. https://www.npmjs.com/package/qs, http://api.jquery.com/jquery.param/)
  paramsSerializer: function (params) {
    return Qs.stringify(params, {arrayFormat: 'brackets'})
  },

  // `data` 是作为请求体被发送的数据
  // 仅适用 'PUT', 'POST', 'DELETE 和 'PATCH' 请求方法
  // 在没有设置 `transformRequest` 时，则必须是以下类型之一:
  // - string, plain object, ArrayBuffer, ArrayBufferView, URLSearchParams
  // - 浏览器专属: FormData, File, Blob
  // - Node 专属: Stream, Buffer
  data: {
    firstName: 'Fred'
  },

  // 发送请求体数据的可选语法
  // 请求方式 post
  // 只有 value 会被发送，key 则不会
  data: 'Country=Brasil&City=Belo Horizonte',

    // `timeout` 指定请求超时的毫秒数。
    // 如果请求时间超过 `timeout` 的值，则请求会被中断
    timeout: 1000, // 默认值是 `0` (永不超时)

    // `withCredentials` 表示跨域请求时是否需要使用凭证
    withCredentials: false, // default

    // `adapter` 允许自定义处理请求，这使测试更加容易。
    // 返回一个 promise 并提供一个有效的响应 （参见 lib/adapters/README.md）。
    adapter: function (config) {
    /* ... */
  },

  // `auth` HTTP Basic Auth
  auth: {
    username: 'janedoe',
      password: 's00pers3cret'
  },

  // `responseType` 表示浏览器将要响应的数据类型
  // 选项包括: 'arraybuffer', 'document', 'json', 'text', 'stream'
  // 浏览器专属：'blob'
  responseType: 'json', // 默认值

    // `responseEncoding` 表示用于解码响应的编码 (Node.js 专属)
    // 注意：忽略 `responseType` 的值为 'stream'，或者是客户端请求
    // Note: Ignored for `responseType` of 'stream' or client-side requests
    responseEncoding: 'utf8', // 默认值

    // `xsrfCookieName` 是 xsrf token 的值，被用作 cookie 的名称
    xsrfCookieName: 'XSRF-TOKEN', // 默认值

    // `xsrfHeaderName` 是带有 xsrf token 值的http 请求头名称
    xsrfHeaderName: 'X-XSRF-TOKEN', // 默认值

    // `onUploadProgress` 允许为上传处理进度事件
    // 浏览器专属
    onUploadProgress: function (progressEvent) {
    // 处理原生进度事件
  },

  // `onDownloadProgress` 允许为下载处理进度事件
  // 浏览器专属
  onDownloadProgress: function (progressEvent) {
    // 处理原生进度事件
  },

  // `maxContentLength` 定义了node.js中允许的HTTP响应内容的最大字节数
  maxContentLength: 2000,

    // `maxBodyLength`（仅Node）定义允许的http请求内容的最大字节数
    maxBodyLength: 2000,

    // `validateStatus` 定义了对于给定的 HTTP状态码是 resolve 还是 reject promise。
    // 如果 `validateStatus` 返回 `true` (或者设置为 `null` 或 `undefined`)，
    // 则promise 将会 resolved，否则是 rejected。
    validateStatus: function (status) {
    return status >= 200 && status < 300; // 默认值
  },

  // `maxRedirects` 定义了在node.js中要遵循的最大重定向数。
  // 如果设置为0，则不会进行重定向
  maxRedirects: 5, // 默认值

    // `socketPath` 定义了在node.js中使用的UNIX套接字。
    // e.g. '/var/run/docker.sock' 发送请求到 docker 守护进程。
    // 只能指定 `socketPath` 或 `proxy` 。
    // 若都指定，这使用 `socketPath` 。
    socketPath: null, // default

    // `httpAgent` and `httpsAgent` define a custom agent to be used when performing http
    // and https requests, respectively, in node.js. This allows options to be added like
    // `keepAlive` that are not enabled by default.
    httpAgent: new http.Agent({ keepAlive: true }),
    httpsAgent: new https.Agent({ keepAlive: true }),

    // `proxy` 定义了代理服务器的主机名，端口和协议。
    // 您可以使用常规的`http_proxy` 和 `https_proxy` 环境变量。
    // 使用 `false` 可以禁用代理功能，同时环境变量也会被忽略。
    // `auth`表示应使用HTTP Basic auth连接到代理，并且提供凭据。
    // 这将设置一个 `Proxy-Authorization` 请求头，它会覆盖 `headers` 中已存在的自定义 `Proxy-Authorization` 请求头。
    // 如果代理服务器使用 HTTPS，则必须设置 protocol 为`https`
    proxy: {
    protocol: 'https',
      host: '127.0.0.1',
      port: 9000,
      auth: {
      username: 'mikeymike',
        password: 'rapunz3l'
    }
  },

  // see https://axios-http.com/zh/docs/cancellation
  cancelToken: new CancelToken(function (cancel) {
  }),

    // `decompress` indicates whether or not the response body should be decompressed 
    // automatically. If set to `true` will also remove the 'content-encoding' header 
    // from the responses objects of all decompressed responses
    // - Node only (XHR cannot turn off decompression)
    decompress: true // 默认值

}

拦截器

axios 实例支持在请求方法发送前和返回前拦截他们，本质上就是编写拦截器函数，这个拦截器函数接受参数，我们可以根据业务要求对参数做一些处理后再返回。

添加请求拦截器和响应拦截器的示例代码如下：

javascript

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/', // 公共基础 URL
  timeout: 1000, // 请求超时时间
  headers: { 'X-Custom-Header': 'foobar' } // 默认请求头
});
// 添加请求拦截器
instance.interceptors.request.use(function (config) {
  // 在发送请求之前做些什么
  return config;
}, function (error) {
  // 对请求错误做些什么
  return Promise.reject(error);
});

// 添加响应拦截器
instance.interceptors.response.use(function (response) {
  // 2xx 范围内的状态码都会触发该函数。
  // 对响应数据做点什么
  return response;
}, function (error) {
  // 超出 2xx 范围的状态码都会触发该函数。
  // 对响应错误做点什么
  return Promise.reject(error);
});

axios 源码

目录结构

markdown

lib/
├── adapters/          # 适配器目录，处理不同环境的请求实现
├── cancel/           # 取消请求相关的功能
├── core/             # 核心功能实现
├── defaults/         # 默认配置
├── env/              # 环境相关代码
├── helpers/          # 辅助函数
├── platform/         # 平台特定代码
├── axios.js          # 入口文件
└── utils.js          # 工具函数

核心请求特性实现

我们先从入口类 lib/axios.js 看起。

lib/axios.js中有一个工厂函数createInstance，这个工厂函数封装了 Axios 实例创建过程。

axios.js默认导出的就是createInstance函数创建的一个实例，传入 axios 默认配置。

这里的核心是用户引入的 axios 本身是一个函数，可以直接调用，同时将 Axios 上的一些属性和方法挂载到这个函数对象上，让 Axios 实例既可以作为函数调用，又可以使用对象方法，非常灵活：

javascript

function createInstance(defaultConfig) {
  // axios示例
  const context = new Axios(defaultConfig);
  // 将 Axios 原型上的 request 方法绑定到 context 实例上
  // 这样绑定后的 instance 可以作为函数直接调用,instance('/app')
  const instance = bind(Axios.prototype.request, context);

  // 将 Axios 原型上的方法复制到实例上
  utils.extend(instance, Axios.prototype, context, { allOwnKeys: true });

  // 将 context 实例上的方法复制到实例上
  utils.extend(instance, context, null, { allOwnKeys: true });

  // 工厂函数，用于给用户提供创建新的实例的方法
  instance.create = function create(instanceConfig) {
    return createInstance(mergeConfig(defaultConfig, instanceConfig));
  };

  return instance;
}

// Create the default instance to be exported
const axios = createInstance(defaults);
// .... 
export default axios

接下来我们来看看 lib/core/Axios.js这个核心类。这个类只有一个 request请求方法。同时通过通过原型扩展的方式添加 get、post 等方法。

javascript

class Axios {
  // 构造方法
  constructor(instanceConfig) {
    this.defaults = instanceConfig;
    this.interceptors = {
      request: new InterceptorManager(),  // 请求拦截器管理器
      response: new InterceptorManager()  // 响应拦截器管理器
    };
  }
  // 请求方法
  async request(configOrUrl, config){
    try {
      return await this._request(configOrUrl, config);
    } catch (err) {
      if (err instanceof Error) {
        // 处理异常的逻辑......
      }
      throw err;
    }
  };
  // 实际发送请求函数
  _request(configOrUrl, config) {
    // 允许axios('example/url'[, config])类似fetch API的用法
    if (typeof configOrUrl === 'string') {
      config = config || {};
      config.url = configOrUrl;
    } else {
      config = configOrUrl || {};
    }
    //... 处理header、拦截器等相关代码
    // 发送实际请求
    try {
      // 使用dispatchRequest发送实际代码
      promise = dispatchRequest.call(this, newConfig);
    } catch (error) {
      return Promise.reject(error);
    }
  };
}

// 添加数据请求别名（快捷方式），这样用户是在使用的
// 为不需要数据的请求方法提供别名
// 这里采用原型的方式而不是class实例方法添加可能有两点考虑
// 1. 性能更好，通过原型方式性能更好（所有Axios实例会共享这些方法）
// 2. 代码更简洁，通过class类中定义每一个方法都需要书写代码
utils.forEach(['delete', 'get', 'head', 'options'], function forEachMethodNoData(method) {
  /*eslint func-names:0*/
  Axios.prototype[method] = function(url, config) {
    return this.request(mergeConfig(config || {}, {
      method,
      url,
      data: (config || {}).data
    }));
  };
});
// 为需要数据的请求方法提供别名
utils.forEach(['post', 'put', 'patch'], function forEachMethodWithData(method) {
  /*eslint func-names:0*/

  /**
   * 生成HTTP方法
   * 
   * @param {Boolean} isForm 是否为表单提交
   * @returns {Function} HTTP方法函数
   */
  function generateHTTPMethod(isForm) {
    return function httpMethod(url, data, config) {
      return this.request(mergeConfig(config || {}, {
        method,
        headers: isForm ? {
          'Content-Type': 'multipart/form-data'
        } : {},
        url,
        data
      }));
    };
  }

  // 创建标准方法
  Axios.prototype[method] = generateHTTPMethod();

  // 创建表单提交方法（例如postForm, putForm, patchForm）
  Axios.prototype[method + 'Form'] = generateHTTPMethod(true);
});

拦截器实现

axios 拦截器本质上就是一个方法，在源码层面就是在请求前/请求后顺序执行请求拦截器和相应拦截器。

javascript

/**
 * 拦截器管理类
 * 用于管理请求和响应的拦截器
 */
class InterceptorManager {
  constructor() {
    this.handlers = [];
  }

  /**
   * 添加一个新的拦截器到栈中
   *
   * @param {Function} fulfilled Promise成功的处理函数
   * @param {Function} rejected Promise失败的处理函数
   * @param {Object} options 配置选项
   * @param {boolean} options.synchronous 是否同步执行
   * @param {Function} options.runWhen 确定是否运行拦截器的函数
   * @return {Number} 返回拦截器的ID，用于后续移除
   */
  use(fulfilled, rejected, options) {
    this.handlers.push({
      fulfilled,
      rejected,
      synchronous: options ? options.synchronous : false,
      runWhen: options ? options.runWhen : null
    });
    return this.handlers.length - 1;
  }

  /**
   * 根据ID移除拦截器
   * 注意：这里不是真正的删除，而是将对应位置设为null
   *
   * @param {Number} id use方法返回的拦截器ID
   * @returns {Boolean} 如果成功移除返回true，否则返回false
   */
  eject(id) {
    if (this.handlers[id]) {
      this.handlers[id] = null;
    }
  }

  /**
   * 清空所有拦截器
   * 将handlers重置为空数组
   *
   * @returns {void}
   */
  clear() {
    if (this.handlers) {
      this.handlers = [];
    }
  }

  /**
   * 遍历所有已注册的拦截器
   * 
   * 这个方法特别有用，因为它会跳过那些已经被eject方法设置为null的拦截器
   * 在执行拦截器链时使用
   *
   * @param {Function} fn 对每个拦截器执行的函数
   * @returns {void}
   */
  forEach(fn) {
    utils.forEach(this.handlers, function forEachHandler(h) {
      if (h !== null) {
        fn(h);
      }
    });
  }
}

export default InterceptorManager;

Axios 中处理拦截器逻辑

javascript

class Axios{
  _request(configOrUrl, config){
    // 请求拦截前，执行请求拦截器
    while (i < len) {
      const onFulfilled = requestInterceptorChain[i++];
      const onRejected = requestInterceptorChain[i++];
      try {
        newConfig = onFulfilled(newConfig);
      } catch (error) {
        onRejected.call(this, error);
        break;
      }
    }

    // 发送实际请求
    try {
      promise = dispatchRequest.call(this, newConfig);
    } catch (error) {
      return Promise.reject(error);
    }

    // 请求完成后，执行响应拦截器
    i = 0;
    len = responseInterceptorChain.length;

    while (i < len) {
      promise = promise.then(responseInterceptorChain[i++], responseInterceptorChain[i++]);
    }

    return promise;
  }
}

请求和响应时候数据自动转换

在发送 request 请求时，axios 会自动根据请求头中content-type类型对请求数据进行转换；

在响应 response 时候，axios 默认会将返回数据转换为 json，而不考虑 response 的 content-type 类型。

关于这块逻辑实现的代码：

首先是lib/core/transformData.js中，定义了**transformData**函数，作为一个入口，处理请求或响应后的数据逻辑处理:

javascript

export default function transformData(fns, response) {
  const config = this || defaults;
  const context = response || config;
  const headers = AxiosHeaders.from(context.headers);
  let data = context.data;

  utils.forEach(fns, function transform(fn) {
    data = fn.call(config, data, headers.normalize(), response ? response.status : undefined);
  });

  headers.normalize();

  return data;
}

在lib/default/index.js中定义了默认的转换器函数:

javascript

const defaults = {

  /**
   * 请求数据转换器
   * 根据数据类型和内容类型进行适当的转换处理
   *
   * @param {*} data 原始请求数据
   * @param {Object} headers 请求头对象
   * @returns {*} 转换后的数据
   */
  transformRequest: [function transformRequest(data, headers) {
    // 获取内容类型
    const contentType = headers.getContentType() || '';
    // 检查是否为JSON内容类型
    const hasJSONContentType = contentType.indexOf('application/json') > -1;
    // 检查数据是否为对象
    const isObjectPayload = utils.isObject(data);

    // 如果是HTML表单对象，转换为FormData
    if (isObjectPayload && utils.isHTMLForm(data)) {
      data = new FormData(data);
    }

    // 检查是否为FormData类型
    const isFormData = utils.isFormData(data);

    // 处理FormData类型
    if (isFormData) {
      // 如果内容类型是JSON，将FormData转为JSON字符串，否则直接返回FormData
      return hasJSONContentType ? JSON.stringify(formDataToJSON(data)) : data;
    }

    // 以下数据类型无需转换，直接返回原始数据
    if (utils.isArrayBuffer(data) ||
        utils.isBuffer(data) ||
        utils.isStream(data) ||
        utils.isFile(data) ||
        utils.isBlob(data) ||
        utils.isReadableStream(data)
       ) {
      return data;
    }
    // ArrayBufferView类型返回其buffer属性
    if (utils.isArrayBufferView(data)) {
      return data.buffer;
    }
    // URLSearchParams类型设置对应的内容类型并返回字符串形式
    if (utils.isURLSearchParams(data)) {
      headers.setContentType('application/x-www-form-urlencoded;charset=utf-8', false);
      return data.toString();
    }

    let isFileList;

    // 处理对象类型数据
    if (isObjectPayload) {
      // 如果内容类型是x-www-form-urlencoded，转换为URL编码形式
      if (contentType.indexOf('application/x-www-form-urlencoded') > -1) {
        return toURLEncodedForm(data, this.formSerializer).toString();
      }

      // 如果是文件列表或multipart/form-data类型，转换为FormData
      if ((isFileList = utils.isFileList(data)) || contentType.indexOf('multipart/form-data') > -1) {
        const _FormData = this.env && this.env.FormData;

        return toFormData(
          isFileList ? {'files[]': data} : data,
          _FormData && new _FormData(),
          this.formSerializer
        );
      }
    }

    // 对象类型或JSON内容类型，转换为JSON字符串
    if (isObjectPayload || hasJSONContentType ) {
      headers.setContentType('application/json', false);
      return stringifySafely(data);
    }

    // 其他情况直接返回原始数据
    return data;
  }],
  /**
       * 响应数据转换器
       * 主要用于处理响应数据的自动JSON解析
       * 
       * @param {*} data 原始响应数据
       * @returns {*} 转换后的数据
  */
  transformResponse: [function transformResponse(data) {
    // 获取过渡配置，如果实例没有配置则使用默认配置
    const transitional = this.transitional || defaults.transitional;
    // 是否强制JSON解析
    const forcedJSONParsing = transitional && transitional.forcedJSONParsing;
    // 检查响应类型是否明确要求JSON
    const JSONRequested = this.responseType === 'json';

    // 如果数据已经是Response对象或可读流，直接返回
    if (utils.isResponse(data) || utils.isReadableStream(data)) {
      return data;
    }

    // 满足以下条件时尝试JSON解析：
    // 1. 数据是字符串类型
    // 2. 且 (强制JSON解析且未指定responseType) 或 明确请求JSON
    if (data && utils.isString(data) && ((forcedJSONParsing && !this.responseType) || JSONRequested)) {
      // 是否启用静默JSON解析（解析失败时不抛出错误）
      const silentJSONParsing = transitional && transitional.silentJSONParsing;
      // 严格JSON解析模式：未启用静默解析且明确请求JSON
      const strictJSONParsing = !silentJSONParsing && JSONRequested;

      try {
        return JSON.parse(data);
      } catch (e) {
        // 在严格模式下，如果解析失败：
        if (strictJSONParsing) {
          // 如果是语法错误，包装成AxiosError抛出
          if (e.name === 'SyntaxError') {
            throw AxiosError.from(e, AxiosError.ERR_BAD_RESPONSE, this, null, this.response);
          }
          // 其他错误直接抛出
          throw e;
        }
      }
    }

    // 其他情况直接返回原始数据
    return data;
  }]
  // ....
}

文件上传下载进度实现

原生的 xmlhttprequest 实现进度
axios 做了哪些增强？

实践

Echart

规范篇

Eslint

前置知识

xmlHttpRequest

Fetch

一些待整理问题

axios 入门

Axios 实例与配置

拦截器

axios 源码

目录结构

核心请求特性实现

拦截器实现

请求和响应时候数据自动转换

文件上传下载进度实现

axios 做了哪些增强？

取消请求实现

前置知识 ​

xmlHttpRequest ​

Fetch ​

一些待整理 问题 ​

axios 入门 ​

​

Axios 实例与配置 ​

拦截器 ​

axios 源码 ​

目录结构 ​

核心请求特性实现 ​

拦截器实现 ​

请求和响应时候数据自动转换 ​

文件上传下载进度实现 ​

axios 做了哪些增强？ ​

取消请求实现 ​

前置知识

xmlHttpRequest

Fetch

一些待整理问题

axios 入门

Axios 实例与配置

拦截器

axios 源码

目录结构

核心请求特性实现

拦截器实现

请求和响应时候数据自动转换

文件上传下载进度实现

axios 做了哪些增强？

取消请求实现