前端学习11 axios二次封装

1. axios概念

axios是一个基于Promise的HTTP客户端，可以用于浏览器和Node.js环境。axios支持所有现代浏览器和Node.js，可以用于发送GET、POST、PUT、DELETE等HTTP请求，并且支持请求和相应拦截、自动转换数据格式等功能。

2. Axios的核心

1.Promise 基础：

Axios 基于 Promise，这意味着所有的请求都是异步的，并且可以使用 .then 和 .catch 方法来处理成功和失败的情况。

2.请求配置：

每次发送请求时，可以传递一个配置对象，包含 URL、方法、请求头、请求体等信息。

3.拦截器：

Axios 支持请求和响应拦截器，可以在请求发送前或响应接收后进行一些预处理或后处理操作。

4.错误处理：

Axios 提供了统一的错误处理机制，可以通过 .catch 方法捕获请求过程中发生的任何错误。

5.取消请求：

Axios 支持取消请求，可以在请求发送后随时取消。

6.并发请求：

Axios 提供了 axios.all 和 axios.spread 方法，可以同时发送多个请求，并在所有请求完成后处理结果。

3. Axios的基本使用

Axios常用的几种请求方法：get，post，put，patch，delete

get：一般用于获取数据

post：一般用于提交数据（表单提交与文件上传）

patch：更新数据（只将修改的数据推送到后端（服务端））

put：更新数据（所有数据推送到服务端）

delete：删除数据

//引入 axios
import axios from 'axios'

//默认是get 请求
axios({
  //需要请求的URL地址
  url: 'http://123.207.32.32:8000/home/multidata'
}).then(res => {
  //输出请求成功的数据
  console.log(res);
})

axios({
  url:'http://123.207.32.32:8000/home/data',
  // 专门针对get请求的参数拼接
  prams:{
    type:'pop',
    page:1
  }
}).then(res=>{
  console.log(res);
})

4. axios 二次封装

二次封装的必要性：

代码复用

在多个地方重复编写同样的请求代码，不仅繁琐且容易出错。通过二次封装，我们可以将相同的请求逻辑抽象出来，形成统一的API接口，方便各个组件调用。

统一处理请求和响应

在数据请求时，我们通常需要处理请求的头、参数、响应的格式等。通过二次封装，可以将这些逻辑集中处理，避免每次请求都写冗余的代码。

异常处理

在实际应用中，网络请求常常会因多种原因失败。通过封装，可以在一个地方统一处理错误，方便管理和维护。

拓展功能

对于一些特定项目需求，比如添加请求拦截器、响应拦截器，或者实现请求的重试机制，二次封装提供了灵活的方式来实现这一功能。

4.1 创建Axio实例

首先，创建一个Axios实例，以便于配置和管理。

// axiosInstance.js
import axios from 'axios';

const axiosInstance = axios.create({
    baseURL: ' // API基础路径
    timeout: 10000, // 请求超时时间
    headers: {
        'Content-Type': 'application/json',
    },
});

// 请求拦截器
axiosInstance.interceptors.request.use(
    config => {
        // 可以在发送请求之前做一些处理，如添加token
        const token = localStorage.getItem('token');
        if (token) {
            config.headers.Authorization = `Bearer ${token}`;
        }
        return config;
    },
    error => {
        // 处理请求错误
        return Promise.reject(error);
    }
);

// 响应拦截器
axiosInstance.interceptors.response.use(
    response => {
        // 可以对响应数据进行处理
        return response.data;
    },
    error => {
        // 处理响应错误
        console.error(error);
        return Promise.reject(error);
    }
);

export default axiosInstance;

4.2 封装请求方法

接下来，我们可以将常用的请求方法进行封装，以便于在各个组件中调用

// apiService.js
import axiosInstance from './axiosInstance';

export const getData = (url, params) => {
    return axiosInstance.get(url, { params });
};

export const postData = (url, data) => {
    return axiosInstance.post(url, data);
};

export const putData = (url, data) => {
    return axiosInstance.put(url, data);
};

export const deleteData = (url) => {
    return axiosInstance.delete(url);
};

4.3 使用Axios封装的好处

通过上述代码，我们在项目中可以简化请求的调用，并且能够方便地处理请求和响应。

// 示例使用
import { getData, postData } from './apiService';

getData('/users', { id: 1 })
    .then(data => {
        console.log(data);
    })
    .catch(error => {
        console.error('获取用户数据失败:', error);
    });

postData('/users', { name: 'Jack', age: 30 })
    .then(data => {
        console.log('用户创建成功:', data);
    })
    .catch(error => {
        console.error('创建用户失败:', error);
    });

#前端学习#