【新手速成】Axios 从入门到实战：10分钟搞定前端请求（附Vue3+TS实战案例)

作为刚入门前端的新手你是不是总被「怎么发请求」「怎么处理跨域」「怎么封装请求」这些问题困扰Axios 作为前端最主流的 HTTP 请求库是每个前端开发者的必修课。这篇文章专为新手打造从「核心概念」到「实战封装」再到「Vue3TS 项目落地」全程通俗易懂10分钟就能上手使用一、Axios 是什么为什么要用它1. 核心定义Axios 是一个基于 Promise 的 HTTP 客户端支持浏览器和 Node.js 环境核心作用是让前端代码能向后端服务器发送 GET/POST/PUT/DELETE 等请求实现前后端数据交互。2. 为什么不用原生 fetch/XMLHttpRequest新手可能会问浏览器不是自带 fetch 吗为什么还要用 Axios对比一下就懂了特性Axios原生 fetch跨域处理内置支持需要手动配置请求/响应拦截器原生支持核心优势需手动封装超时处理一行配置需手动写定时器错误处理统一捕获仅 reject 网络错误取消请求内置 API需手动实现兼容性支持 IE8不支持低版本浏览器简单说Axios 把前端发请求的「脏活累活」都封装好了新手不用关心底层实现专注业务逻辑即可。二、Axios 快速上手核心用法新手必会1. 安装 Axios在你的前端项目比如 Vue3/React中执行# npm 安装npminstallaxios# yarn 安装可选yarnaddaxios2. 最基础的使用发送 GET/POST 请求1GET 请求获取数据比如从后端获取 TodoList 数据importaxiosfromaxios;// 发送 GET 请求axios.get(http://localhost:3000/api/todos).then((response){// 请求成功response.data 是后端返回的数据console.log(获取数据成功,response.data);}).catch((error){// 请求失败捕获错误console.error(获取数据失败,error);});2POST 请求提交数据比如添加一条新的待办事项axios.post(http://localhost:3000/api/todos,{content:学习 Axios// 要提交给后端的数据}).then((response){console.log(添加成功,response.data);}).catch((error){console.error(添加失败,error);});3. 核心参数说明新手不用记查就行axios({method:GET,// 请求方法GET/POST/PATCH/DELETEurl:http://localhost:3000/api/todos,// 请求地址params:{id:1},// GET 请求的参数拼在 URL 后面data:{content:学习 Axios},// POST/PUT 请求的参数放在请求体timeout:5000,// 超时时间5秒没响应就报错headers:{Content-Type:application/json}// 请求头}).then(resconsole.log(res)).catch(errconsole.error(err));三、新手必学Axios 封装企业级实战直接在组件里写axios.get/post虽然能用但会导致代码重复、难以维护比如改后端地址要改所有组件。封装 Axios 是新手进阶的第一步下面以 Vue3TS 项目为例教你最实用的封装方式。步骤 1创建 Axios 实例src/api/index.tsimportaxiosfromaxios;// 创建自定义 Axios 实例核心统一配置constrequestaxios.create({baseURL:/api,// 基础地址配合 Vite 代理解决跨域timeout:5000,// 超时时间headers:{Content-Type:application/json// 默认请求格式}});// 请求拦截器发送请求前的统一处理request.interceptors.request.use((config){// 示例给所有请求加登录 Token后续扩展用consttokenlocalStorage.getItem(token);if(token){config.headers.AuthorizationBearer${token};}returnconfig;// 必须返回 config否则请求发不出去},(error){// 请求出错比如还没发出去就断网console.error(请求拦截器错误,error);returnPromise.reject(error);});// 响应拦截器接收响应后的统一处理request.interceptors.response.use((response){// 只返回后端的核心数据简化组件代码returnresponse.data;},(error){// 统一错误处理比如 401 未登录、500 服务器错误if(error.response?.status401){alert(登录过期请重新登录);// 跳转到登录页Vue3 路由示例// router.push(/login);}elseif(error.response?.status500){alert(服务器出错请稍后重试);}console.error(响应拦截器错误,error);returnPromise.reject(error);});// 导出封装好的实例exportdefaultrequest;步骤 2封装业务接口src/api/todoApi.ts把不同业务的请求封装成函数方便组件调用importrequestfrom./index;// 定义 TS 类型可选但推荐提升代码健壮性exportinterfaceTodo{_id:string;content:string;completed:boolean;createTime:string;}// 1. 获取所有待办exportconstgetTodos(){returnrequest.get(/todos);};// 2. 添加待办exportconstaddTodo(content:string){returnrequest.post(/todos,{content});};// 3. 更新待办状态exportconstupdateTodoStatus(id:string,completed:boolean){returnrequest.patch(/todos/${id},{completed});};// 4. 删除待办exportconstdeleteTodo(id:string){returnrequest.delete(/todos/${id});};步骤 3在 Vue3 组件中使用src/App.vuetemplate div input v-modelcontent placeholder输入待办事项 / button clickhandleAdd添加/button ul li v-fortodo in todos :keytodo._id {{ todo.content }} button clickhandleDelete(todo._id)删除/button /li /ul /div /template script setup langts import { ref, onMounted } from vue; import { getTodos, addTodo, deleteTodo } from ./api/todoApi; import type { Todo } from ./api/todoApi; const content ref(); const todos refTodo[]([]); // 页面加载时获取数据 onMounted(async () { try { const res await getTodos(); todos.value res.data; // 直接用封装好的接口 } catch (err) { console.error(获取数据失败, err); } }); // 添加待办 const handleAdd async () { if (!content.value.trim()) return; try { await addTodo(content.value); content.value ; // 重新获取列表 const res await getTodos(); todos.value res.data; } catch (err) { console.error(添加失败, err); } }; // 删除待办 const handleDelete async (id: string) { try { await deleteTodo(id); // 重新获取列表 const res await getTodos(); todos.value res.data; } catch (err) { console.error(删除失败, err); } }; /script四、新手避坑指南1. 跨域问题最常见现象浏览器控制台报错Access to XMLHttpRequest at xxx from origin xxx has been blocked by CORS policy。解决在 Vite 配置文件中加代理vite.config.tsimport{defineConfig}fromvite;importvuefromvitejs/plugin-vue;exportdefaultdefineConfig({plugins:[vue()],server:{proxy:{// 前端请求 /api 会转发到后端地址/api:{target:http://localhost:3000,// 后端服务地址changeOrigin:true,// 允许跨域rewrite:(path)path.replace(/^\/api/,)// 去掉 /api 前缀}}}});2. 异步请求顺序问题现象请求还没返回就执行了后续代码。解决用async/await替代.then/.catch更符合新手的线性思维。特性同步异步Axios 属于这类执行顺序从上到下排队执行不等慢操作先执行后续代码页面体验慢操作会卡住页面不卡页面用户可正常操作结果获取直接赋值需通过「回调 / async-await」获取典型场景简单计算、变量赋值网络请求、定时器、文件读写// 异步函数asyncfunctiongetList(){// 等待请求回来再往下走constresawaitaxios.get(/api/list,{params:{id:1}})console.log(res.data)}getList()3. TS 类型报错现象res.data提示「类型为 any」。解决给接口函数定义返回类型进阶新手可先忽略熟悉后再加// 示例定义接口返回类型interfaceApiResponseT{success:boolean;data:T;message?:string;}// 给 getTodos 加返回类型exportconstgetTodos():PromiseApiResponseTodo[]{returnrequest.get(/todos);};五、总结Axios 是前端请求的「必备工具」新手学习的核心逻辑是基础用法掌握get/post发送请求理解then/catch处理结果核心封装用axios.create统一配置拦截器处理通用逻辑业务落地按模块封装接口函数组件中调用避免重复代码。从「直接写 Axios」到「封装 Axios」是新手从「会用」到「用好」的关键一步。最后提醒新手不用死记硬背重点理解「封装的思想」—— 让代码更简洁、更易维护这才是学习的核心。