2 行 script 搞定 axios：jsDelivr 与 unpkg 选型、踩坑与上线清单

2 行 script 搞定 axiosjsDelivr 与 unpkg 选型、踩坑与上线清单【免费下载链接】axiosPromise based HTTP client for the browser and node.js项目地址: https://gitcode.com/GitHub_Trending/ax/axios新建一个空 HTML贴上两行 script 标签浏览器里axios.get马上就能调用——axios CDN 引入的门槛低到这种程度。不用装 node、不配构建工具、不跑 npm一个下午要交差的演示页、一个老系统的临时补丁页都可以靠 jsDelivr 或 unpkg 这类公共 CDN把 axios 快速集成进来。这篇文章把选型、完整示例、排错方法和上线检查一次讲清楚。30 秒上手最快引入方法 ⚡核心就一行注意版本号是锁死的script srchttps://cdn.jsdelivr.net/npm/axios1.19.0/dist/axios.min.js/script script axios.get(/api/orders).then(res console.log(res.data)); /script三个要点别忽略这份 UMD 压缩包会在window上挂一个全局axios对象后面的业务代码直接调用即可真正的浏览器入口是包内的dist/axios.min.js仓库package.json里的jsdelivr、unpkg字段都指向它所以两个 CDN 的路径写法是通用的业务script必须放在 CDN 脚本之后执行对象还没就绪就调用控制台会直接报 not defined。只演示一次、跑完即弃的页面版本甚至可以不锁只要页面会被人反复打开版本号就必须写死。CDN 还是 npm先判断你的场景别默认「CDN 更省事所以更好」两者的分工不一样场景建议理由单页演示、内部工具、老页面应急修补CDN零依赖贴一行就能跑Vite / Webpack 构建的项目npm参与打包、按需摇树最终体积更小TypeScript 项目npmCDN 包不带类型声明编辑器没有补全axios 被封装库当作依赖npm全局变量容易被其他脚本覆盖混用的代价是同一页面出现两份 axios拦截器和默认配置互相不可见排查起来非常痛苦。一句话原型、演示、应急补丁走 CDN长期维护、多人协作的项目走 npm。jsDelivr 与 unpkg国内速度怎么选两个源装的是同一个 npm 包文件内容完全一致差别只在分发策略按你的读者所在网络选选 jsDelivr当页面主要给国内用户访问——节点分布对大陆网络更友好首屏拉包明显更快想用版本区间写法如axios~1.19.0让 CDN 在范围内自动取最新兼容版一个页面同时挂多个 npm 包统一走一个域名能省下多余的 TLS 握手。选 unpkg当页面面向海外用户或者只是要一个「无脑默认」选项需要按包内原始文件结构取任意单个文件unpkg 对包内容做了 1:1 镜像。两个小提醒unpkg 访问包根目录会多一次 302 跳转URL 里写全dist/axios.min.js路径就没这个问题另外同版本同地址的资源会被浏览器缓存第二次打开页面基本不用重新下载。一份能直接跑的 GET 完整示例把下面这份页面保存为index.html用任意静态服务跑起来例如python -m http.server再让/api/orders返回一个数组即可!DOCTYPE html html langzh-CN head meta charsetUTF-8 / title订单速查/title /head body h2订单速查/h2 div idstatus-line正在拉取…/div ul idorder-board/ul !-- CDN 锁版本 -- script srchttps://cdn.jsdelivr.net/npm/axios1.19.0/dist/axios.min.js/script script const board document.getElementById(order-board); const statusLine document.getElementById(status-line); axios .get(/api/orders, { params: { region: north } }) .then(({ data }) { statusLine.textContent 共 ${data.length} 条; board.innerHTML data .map(item li#${item.order_id}${item.customer}¥${item.amount}/li) .join(); }) .catch(err { statusLine.textContent 请求失败${err.message}; }); /script /body /html示例里的/api/orders与页面同源所以不会触发跨域拦截改成第三方接口前先确认对方返回了Access-Control-Allow-Origin响应头。一个容易混淆的点跨域失败时请求其实已经发出去了控制台看到的错误发生在响应回来之后。示例刻意用了 GET 加params会自动拼到 URL 上POST 场景把方法换成post、把请求体作为参数传入即可。踩坑排查表加载失败怎么兜底 现象大概率原因处理办法控制台报axios is not definedCDN 脚本 404 或被拦截看 Network 面板状态码换域名或核对版本请求发出但浏览器报 CORS目标接口没开跨域服务端加 CORS 头或走同域反向代理axios 行为诡异、版本对不上页面里被加载了第二份不同版本的包全局搜一遍axios.min.js只留一份接口偶发失败、刷新就好主 CDN 波动或被网络限制加一段兜底脚本见下兜底写法——主源加载后做一次检测缺失就补一个备源script if (!window.axios) { const backup document.createElement(script); backup.src https://unpkg.com/axios1.19.0/dist/axios.min.js; document.head.appendChild(backup); } /script更稳的做法是把同一版本下载到自己服务器的静态目录里作为最终保险两个 CDN 同时抽风也不影响业务。上线前 ChecklistURL 锁定具体版本号裸写dist/axios.min.js会跟着最新版漂移挂上 SRI防止文件在传输环节被改动script srchttps://cdn.jsdelivr.net/npm/axios1.19.0/dist/axios.min.js integritysha256-这里填文件真实哈希 crossoriginanonymous/script哈希用openssl dgst -sha256 -binary axios.min.js | openssl base64 -A对下载下来的文件现算别照抄示例值哈希对不上时浏览器会直接拒绝执行该脚本这正是要的效果。兜底脚本已就位备源 CDN 或自托管副本二选一用真实生产网络尤其移动端弱网验证过一次首屏加载确认是 TS 项目后转回 npm 安装以拿到类型声明一句话收尾CDN 负责「快」版本号、SRI 和兜底负责「稳」——把清单勾完再上线。【免费下载链接】axiosPromise based HTTP client for the browser and node.js项目地址: https://gitcode.com/GitHub_Trending/ax/axios创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考