24 Axios 网络请求封装_第1页
24 Axios 网络请求封装_第2页
24 Axios 网络请求封装_第3页
24 Axios 网络请求封装_第4页
24 Axios 网络请求封装_第5页
已阅读5页，还剩11页未读， 继续免费阅读

下载本文档

版权说明：本文档由用户提供并上传，收益归属内容提供方，若内容存在侵权，请进行举报或认领

文档简介

罗荣良Axios网络请求封装本节学习目标1.了解什么是Axios，为什么要封装它。2.学会配置请求拦截器：自动给所有请求戴上“通行证”。3.学会配置响应拦截器：统一处理报错，让组件层的代码极其清爽。4.掌握环境变量的使用，区分开发环境和生产环境。5.解决全栈开发中的经典问题：跨域。什么是Axios？定义：基于Promise的HTTP客户端。地位：前端请求领域的“事实标准”。特性：拦截请求/响应、转换数据、取消请求、自动转换JSON。为什么需要二次封装？原生处理方式的痛点：1.URL硬编码(http://localhost:8080/api/users)。2.每个请求都要手动写Header传Token。3.错误处理重复(每个页面都写try-catch)。封装后：统一管理，一处修改，全局生效。命令：npminstallaxios目录结构推荐：src/utils/request.js(封装核心)src/api/user.js(具体接口)src/api/book.js实战第一步：安装与目录结构创建Axios实例代码(utils/request.js)：环境变量配置(.env)Vite特性：通过.env文件管理配置。使用：import.meta.env.VITE_API_URL.env.development（开发环境）：VITE_API_URL='/api'.duction（生产/上线环境）：VITE_API_URL=''请求拦截器(RequestInterceptor)作用：请求发送前的“安检员”。任务：1.从Pinia获取Token。2.将Token放入请求头(Authorization).代码：config.headers.Authorization=tokenPinia与Axios的联动关键点：在request.js中引入Store。import{useUserStore}from'@/stores/user'conststore=useUserStore()注意：必须在拦截器内部获取Store，否则会报错(Pinia未初始化)。响应拦截器(ResponseInterceptor)作用：数据返回后的“过滤器”。任务：1.脱壳：只返回res.data，丢弃status,headers等杂质。2.判错：判断业务状态码(code!==200)。代码演示：统一错误处理逻辑HTTP状态码异常处理场景：401,404,500等网络层面的错误。位置：error回调函数中。逻辑：switch(status)->401跳转登录页，500提示服务器异常。API模块化管理不要把axios调用散落在.vue文件里。新建src/api/user.js：组件中优雅的调用API：组件中调用API跨域代理配置问题：前端5173访问后端8080会跨域。解决：vite.config.js配合baseURL='/api'使用。本节小结与作业小结：Axios实例、拦截器、环境变量、API管理。作业：1.完成r

人人文库> 全部分类> 教育资料 > 课件下载

温馨提示

  • 1. 本站所有资源如无特殊说明，都需要本地电脑安装OFFICE2007和PDF阅读器。图纸软件为CAD,CAXA,PROE,UG,SolidWorks等.压缩文件请下载最新的WinRAR软件解压。
  • 2. 本站的文档不包含任何第三方提供的附件图纸等，如果需要附件，请联系上传者。文件的所有权益归上传用户所有。
  • 3. 本站RAR压缩包中若带图纸，网页内容里面会有图纸预览，若没有图纸预览就没有图纸。
  • 4. 未经权益所有人同意不得将文件中的内容挪作商业或盈利用途。
  • 5. 人人文库网仅提供信息存储空间，仅对用户上传内容的表现方式做保护处理，对用户上传分享的文档内容本身不做任何修改或编辑，并不能对任何下载内容负责。
  • 6. 下载文件中如有侵权或不适当内容，请与我们联系，我们立即纠正。
  • 7. 本站不保证下载资源的准确性、安全性和完整性, 同时也不承担用户因使用这些下载资源对自己和他人造成任何形式的伤害或损失。

最新文档

评论

0/150

提交评论