当前位置：首页 > article >正文

axios相关知识点

article 2024/9/24 14:30:32

一、基本概念

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 时，可以根据项目需求定义更多的请求配置选项，如超时时间、请求取消等。这些配置可以通过封装后的方法作为参数传递，使得请求发送更加灵活和可控。