axios 快速上手安装、导入与发起第一个 HTTP 请求【免费下载链接】axiosPromise based HTTP client for the browser and node.js项目地址: https://gitcode.com/GitHub_Trending/ax/axios本篇基于 axios 官方文档 first-steps 编写覆盖从安装npm/pnpm/yarn/bun/Deno/CDN、模块导入方式ESM/CJS/直接引用构建产物到发起第一个 GET/POST 请求的完整流程。结合本仓库源码lib/axios.js、lib/core/Axios.js你将理解默认实例是如何被创建的、请求方法别名从哪来以及生产环境中timeout配置背后的超时错误码机制。安装 axiosaxios 是一个同时运行于浏览器与 Node.js 的 Promise 化 HTTP 客户端。仓库 package.json 中当前版本为1.19.0main指向 Node 端预构建产物./dist/node/axios.cjsmodule指向 ESM 源码入口./index.js。使用包管理器最常用的方式是从 npm 安装到项目中npm install axios其他主流包管理器同样支持pnpm install axiosyarn add axiosbun add axiosdeno install npm:axios使用 jsDelivr CDN通过 CDN 引入时官方建议同时做两件事使用压缩版axios.min.js、锁定版本号避免版本漂移带来意外变更。若要跟随最新版本可去掉版本号但官方明确不推荐在生产环境中这样做script srchttps://cdn.jsdelivr.net/npm/axiosx.x.x/dist/axios.min.js/script使用 unpkgunpkg 的建议与 jsDelivr 完全一致——用压缩产物并固定版本script srchttps://unpkg.com/axiosx.x.x/dist/axios.min.js/script为什么 CDN 地址是 dist/axios.min.jspackage.json 中声明了jsdelivr: dist/axios.min.js与unpkg: dist/axios.min.js这两个字段就是 CDN 平台的默认文件约定files字段package.json则列出了发布到 npm 的产物清单包括dist/axios.js、dist/axios.min.js、dist/esm/axios.js、dist/browser/axios.cjs、dist/node/axios.cjs等这正是后文“直接引用构建产物”的可用路径。模块解析exports 映射axios 通过 package.json 的exports字段为不同运行环境路由到不同实现这也是它能“一套 API、多端运行”的关键浏览器browser条件require走./dist/browser/axios.cjsimport走./index.jsNode.js / 通用default条件require走./dist/node/axios.cjsimport走./index.jsbun与react-native条件也各自有独立映射额外暴露了./dist/browser/axios.cjs、./dist/node/axios.cjs以及一批./unsafe/*子路径如 lib/adapters/xhr.js、lib/adapters/http.js 源码供高级用户直接引用内部实现。另外sideEffects: falsepackage.json声明了该库对打包器是纯模块可被安全地 tree-shake。导入 axios安装完成后根据模块体系选择合适的导入方式。ESM 命名导入import axios, { isCancel, AxiosError } from axios;这些命名导出并非独立实现而是对默认导出的“解包再导出”——仓库入口 index.js 直接import axios from ./lib/axios.js然后将其静态属性逐一解构为命名导出Axios、AxiosError、isCancel、CancelToken、VERSION、toFormData、mergeConfig、create等见 index.js。文件头部的注释也说明了意图“让顶层导出与静态属性保持一致ESM 与 CJS 的行为相同”。默认导出由于命名导出只是 axios 工厂的再导出直接使用默认导出同样可行import axios from axios; console.log(axios.isCancel(something));CommonJS require若使用require导入只有默认导出可用无法解构命名成员const axios require(axios); console.log(axios.isCancel(something));对部分打包器和 ES6 linter你可能需要这种形式import { default as axios } from axios;直接引用预构建产物在模块解析行为异常的自定义或遗留环境中可以绕过exports映射直接引用预构建的 CommonJS 包ES2017 语法const axios require(axios/dist/browser/axios.cjs); // 浏览器 CommonJS 包 // const axios require(axios/dist/node/axios.cjs); // Node CommonJS 包这两条路径在 package.json 的exports中都有显式声明是被官方支持的直接引用方式。TypeScript 类型类型声明按导入方式区分exports[.].types中require条件指向 index.d.ctsimport条件指向 index.d.ts。index.d.cts 中的AxiosStatic接口完整声明了默认实例上可用的静态成员isCancel、isAxiosError、mergeConfig、getAdapter、AxiosHeaders等与上面 index.js 的命名导出一一对应。默认实例是怎么创建的从源码看你导入的axios并不是一个类实例而是工厂函数createInstance(defaults)的产物定义在 lib/axios.js以全局默认配置defaults构造new Axios(defaultConfig)把Axios.prototype.request绑定到该实例作为可调用函数将Axios.prototype与实例自身属性合并到函数对象上额外挂上instance.create用于派生新实例。随后lib/axios.js执行const axios createInstance(defaults)并挂载Axios、AxiosError、CanceledError、CancelToken、isCancel、VERSION、isAxiosError、toFormData、AxiosHeaders、HttpStatusCode等静态成员最后export default axios。这解释了为什么默认导出和命名导出“看起来一样”——它们同源。发起第一个请求一个 axios 请求最少只需两行代码提供 URL 与方法即可。以下是对 JSONPlaceholder 的 GET 请求示例import axios from axios; const response await axios.get( https://jsonplaceholder.typicode.com/posts/1 ); console.log(response.data);axios 为常用 HTTP 方法提供了别名axios.get、axios.post、axios.put、axios.patch、axios.delete、axios.head、axios.options也可以用axios.request以任意方法发起请求。从源码看这些别名在 lib/core/Axios.js 中统一生成无请求体的方法delete、get、head、options调用this.request(mergeConfig(config || {}, { method, url, data: ... }))其中data仅在调用方显式提供时才带入有请求体的方法post、put、patch、query额外接收data参数并自动生成对应的xxxForm变体如postForm自动设置Content-Type: multipart/form-data。也就是说axios.get(url, config)本质上是axios.request({ ...config, method: get, url })的语法糖。若未指定methodlib/core/Axios.js 会按“本次配置 → 实例默认 →get”的顺序确定方法因此默认请求方法就是GET。两种等价的调用形态也都受支持// 直接传 config 对象 axios({ method: post, url: /user/12345, data: { firstName: Fred, lastName: Flintstone }, }); // 或 fetch 风格axios(url[, config])默认 GET axios(/user/12345);发起 POST 请求const response await axios.post(/user, { firstName: Fred, lastName: Flintstone, }); console.log(response);响应对象的结构无论哪种方式成功后 resolve 的都是一个AxiosResponse对象其结构在 index.d.cts 中定义data响应体、status状态码、statusText、headers、config最终生效的请求配置、request底层请求对象。因此上面示例中response.data才是接口返回的 JSON 数据本身。本地跑一个示例验证仓库自带可运行的示例examples/get/index.html 通过全局axiosCDN 脚本调用axios.get(/get/server)并渲染结果配套后端为 examples/server.js。可以在项目根目录执行npm run examples对应 package.json 中examples: node ./examples/server.js按页面提示访问对应端口即可看到真实的 GET 请求流程。更贴近 CI 的验证可参考 tests/smoke/esm 与 tests/smoke/cjs 下的冒烟测试它们分别在 ESM 与 CJS 环境中验证基础请求行为。生产环境务必设置 timeout官方在首个请求示例旁给出了一条重要提示没有timeout时卡住的请求可能永远挂起。请通过请求配置传入超时时间const response await axios.get(https://example.com/data, { timeout: 5000, // 5 秒 });关于这个参数默认值lib/defaults/index.js 中timeout: 0注释明确 “If set to 0 (default) a timeout is not created”即默认不创建超时超时后的错误码浏览器 XHR 适配器在超时时会抛出带ECONNABORTED码的AxiosErrorlib/adapters/xhr.jsNode.js HTTP 适配器同样抛出ECONNABORTEDlib/adapters/http.js可选的语义澄清当配置transitional.clarifyTimeoutError: true时适配器改用ETIMEDOUT错误码见 lib/adapters/xhr.js、lib/adapters/http.js这两个错误码常量均定义于 lib/core/AxiosError.js。因此捕获端应同时识别ECONNABORTED/ETIMEDOUT。完整的timeout、baseURL、adapter、responseType等参数说明见 request config 文档如何统一捕获网络错误见 error handling 文档。下一步完成第一个请求后建议按以下路径继续深入均为本仓库文档Request config全部请求参数包括timeout、paramsSerializer、adapter等Error handlingAxiosError的错误码体系与isAxiosError判断Interceptors请求/响应拦截器用于统一鉴权、日志与数据转换Create an instance用axios.create({ baseURL, timeout, headers })派生带共享默认值的实例Response schema响应对象的完整字段说明Request method aliases方法别名的完整列表。同时可查阅 升级指南 了解从旧版本迁移的注意事项以及 TypeScript 示例 与 CommonJS 示例 两种典型用法。【免费下载链接】axiosPromise based HTTP client for the browser and node.js项目地址: https://gitcode.com/GitHub_Trending/ax/axios创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考