axios相关知识点

一、基本概念

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.status==401){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