axios源码调试

axios

什么是 axios？

Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。

特性

• 从浏览器中创建 XMLHttpRequests
• 从 node.js 创建 http 请求
• 支持 Promise API
• 拦截请求和响应
• 转换请求数据和响应数据
• 取消请求
• 自动转换 JSON 数据
• 客户端支持防御 XSRF

源码调试

步骤一

将 axios 的源码克隆到本地，并安装依赖。

$ git clone https://github.com/axios/axios.git
$ cd axios
$ npm install

步骤二

修改 sanbox/server.js 文件，将 常量 修改为变量。

...
// 注意：下面这行代码定义了常量，同时下文又进行了修改。
// const pathname = parsed.pathname;

// 修改为变量
let pathname = parsed.pathname;

console.log('[' + new Date() + ']', req.method, pathname);

if (pathname === '/') {
  pathname = '/index.html';
}
...

步骤三

执行 npm run build ，这个命令会执行 gulp clear && cross-env NODE_ENV=production rollup -c -m ，先清除之前的构建产物，然后使用 Rollup 进行构建，最终生成 dist 目录。

• gulp clear‌ : 通常用于删除 dist、lib 等构建输出目录，确保打包前环境干净。
• cross-env NODE_ENV=production‌ : 使用 cross-env 工具跨平台设置环境变量 NODE_ENV=production
• rollup -c -m‌
  • -c : 加载 rollup.config.js 配置文件进行打包
  • -m : 生成 Source Map 文件，便于生产环境调试源码

$ npm run build

步骤四

修改 vscode 调试配置，修改为以下内容，其中 url 中的端口需要与 sandbox/server.js 中的端口一致。如果 sandbox/server.js 中的端口修改了 ，则 url 中的端口也需要同步修改 。

{
  // 使用 IntelliSense 了解相关属性。
  // 悬停以查看现有属性的描述。
  // 欲了解更多信息，请访问: https://go.microsoft.com/fwlink/?linkid=830387
  "version": "0.2.0",
  "configurations": [
    {
      "type": "chrome",
      "request": "launch",
      "name": "针对 localhost 启动 Chrome",
      "url": "http://localhost:3000",
      "webRoot": "${workspaceFolder}/dist"
    }
  ]
}

步骤五

1. 在 axios 源码目录，执行 npm run start 命令启动调试服务器。

2. 在想要调试的地方打上断点。

3. 在 vscode 中，点击 调试 按钮，选择 针对 localhost 启动 Chrome 配置，即可调试 axios 源码。