网站怎么管理维护,北京网站域名快速备案,12个 网站模板 管理,天河岗顶棠下上社网站建设设计一、基本概念
1、基于Promise:Axios通过Promise实现异步请求#xff0c;避免了传统回调函数导致的“回调地狱”问题#xff0c;使得代码更加清晰和易于维护。
2、跨平台#xff1a;Axios既可以在浏览器中运行#xff0c;也可以在Node.js环境中使用#xff0c;为前后端开…一、基本概念
1、基于Promise:Axios通过Promise实现异步请求避免了传统回调函数导致的“回调地狱”问题使得代码更加清晰和易于维护。
2、跨平台Axios既可以在浏览器中运行也可以在Node.js环境中使用为前后端开发提供了统一的接口。
3、HTTP请求方法支持GET、POST、PUT、DELETE等多种HTTP请求方法满足不同的数据交互需求。
//axios基础封装
import axios from axios;
import { ElMessage } from element-plus;//创建一个可以发起请求获得相应响应的实例
const httpInstance axios.create({timeout:50000
})//配置拦截器
//axios请求拦截器
httpInstance.interceptors.request.use(config {return config
},e Promise.reject(e))//axios响应拦截器
httpInstance.interceptors.response.use(res res.data,e {if(e.response.status401){ElMessage.error(请先登录)//跳转登录页面}else{ElMessage({type:error,message:请重新登录e})}return Promise.reject(e)
})export default httpInstance //对外暴露用于在其他位置调用二、为什么对axios进行封装
Axios 是一个基于 promise 的 HTTP 客户端用于浏览器和 node.js 环境能够发送异步 HTTP 请求到 REST 端点并处理响应。尽管 Axios 已经提供了非常丰富的功能但在实际项目中我们通常会对其进行封装原因主要有以下几点
1、统一请求和响应处理
①请求前处理在发送请求之前可能需要添加一些公共的请求头如认证令牌、内容类型等或者进行请求参数的统一处理如序列化、加密等。
②响应后处理接收到响应后可能需要对响应数据进行统一处理如状态码校验、错误信息的格式化、数据结构的统一等。封装后可以在一个地方处理这些问题避免在每个请求中重复编写相同的逻辑。
2、减少代码冗余
在项目中可能会多次发送类似的 HTTP 请求。如果每次都直接调用 Axios那么代码中会存在大量的重复逻辑。通过封装 Axios可以定义一些通用的请求方法如 GET、POST、PUT、DELETE 等并在这些方法内部实现上述的统一处理逻辑从而减少代码冗余。
3、增强可读性和可维护性
封装后的 Axios 请求方法通常具有更明确的命名和参数这使得代码更加易于理解和维护。其他开发者在查看或修改代码时可以更容易地理解每个请求的目的和预期的行为。
4、方便集成拦截器
Axios 提供了请求拦截器和响应拦截器的功能允许你在请求发送前或响应返回后执行一些操作。通过封装 Axios可以更加方便地在全局范围内集成这些拦截器实现如日志记录、请求重试、权限校验等功能。
5、支持更多的请求配置在封装 Axios 时可以根据项目需求定义更多的请求配置选项如超时时间、请求取消等。这些配置可以通过封装后的方法作为参数传递使得请求发送更加灵活和可控。
6、适应项目架构随着项目规模的扩大和架构的演进可能需要将 HTTP 请求的处理逻辑与业务逻辑分离或者将请求发送到不同的后端服务。通过封装 Axios可以更加容易地实现这些需求而不必在每个请求中都进行复杂的配置和逻辑处理。
综上所述封装 Axios 主要是为了提高代码的可重用性、可维护性和可扩展性同时简化 HTTP 请求的发送和处理过程。
三、核心功能
1、请求和响应拦截器Axios允许在请求发送前和响应返回后进行拦截进行额外的处理如添加请求头、修改响应数据等。
2、取消请求在某些场景下如用户退出页面或重新发起请求时Axios支持取消正在进行的请求以节省资源。
3、自动转换JSON数据Axios默认会将请求数据和响应数据自动转换为JSON格式简化了数据处理过程。
4、全局配置可以通过全局配置设置默认的请求基础URL、请求超时时间等以减少重复配置。
四、常用方法
1、axios(config):通过传入一个配置对象来发送请求这是Axios最通用的请求方式。
2、axios.get(url[,config]):发送GET请求可以通过params配置项传递查询参数。
3axios.post(url[,data[config]]发送POST请求可以通过data配置项传递请求体数据。
4、axios.all(promises):批量执行多个异步请求并返回一个包含所有请求结果的数组。
5、axios.spread(callback):与axios.all配合使用用于处理批量请求的结果。
五、实例化
1、axios.create([config]):可以根据提供的配置创建一个新的Axios实例这个实例可以有自己的请求配置而不会影响到全局的Axios实例。
六、错误处理
1、在使用Axios时可以通过.catch()方法捕获请求过程中发生的错误并进行相应的处理。
七、使用场景
1、数据获取在Web应用中Axios常用于从服务器获取数据如用户信息、商品列表等。
2、表单提交Axios也可以用于提交表单数据包括传统的表单提交和文件上传等。
3、API调用在开发过程中Axios可以方便地调用后端提供的API接口实现前后端的数据交互。
八、注意事项
1、在使用Axios时需要注意请求URL的正确性、请求参数的正确性以及错误处理的重要性。
2、当需要在多个组件或文件中复用Axios实例时可以通过创建Axios实例来减少重复配置和提高代码的可维护性。
总的来说Axios是一款功能强大、易于使用的HTTP客户端库它在Web开发中发挥着重要的作用。掌握Axios的使用方法和特性可以更加高效地进行数据交互和请求处理。
更多信息可查询
axios中文网|axios API 中文文档 | axios
