在 React 项目中使用 axios 进行 HTTP 请求时，你可以封装 get、put、post 等请求方法，使代码更简洁、复用性更高。尤其是对于 GET 请求，需要将对象参数解析并拼接到 URL 中。

以下是封装 axios 请求的一个简单示例，包括如何处理 GET 请求的 URL 参数拼接。

1. 安装 axios

javascript">npm install axios

2. 创建一个 api.js 文件来封装 axios 请求

javascript">import axios from 'axios';// 创建axios实例
const axiosInstance = axios.create({baseURL: 'https://your-api-url.com/api', // 基础URL，可以根据项目配置timeout: 5000, // 请求超时时间
});// 请求拦截器
axiosInstance.interceptors.request.use((config) => {// 在发送请求之前可以在这里添加请求头等信息// 比如 config.headers.Authorization = `Bearer ${token}`;return config;},(error) => {return Promise.reject(error);}
);// 响应拦截器
axiosInstance.interceptors.response.use((response) => {return response.data; // 直接返回数据},(error) => {return Promise.reject(error);}
);// 工具函数，用于拼接GET请求的参数到URL上
const buildUrl = (url, params) => {if (!params || Object.keys(params).length === 0) {return url;}const queryString = Object.entries(params).map(([key, value]) => `${encodeURIComponent(key)}=${encodeURIComponent(value)}`).join('&');return `${url}?${queryString}`;
};// GET 请求封装
const get = (url, params = {}) => {const fullUrl = buildUrl(url, params);return axiosInstance.get(fullUrl);
};// POST 请求封装
const post = (url, data = {}) => {return axiosInstance.post(url, data);
};// PUT 请求封装
const put = (url, data = {}) => {return axiosInstance.put(url, data);
};// DELETE 请求封装
const del = (url, params = {}) => {const fullUrl = buildUrl(url, params);return axiosInstance.delete(fullUrl);
};// 导出封装的请求方法
export default {get,post,put,delete: del,
};

这里可以进一步封装成一个单独的函数来简化调用和传参。

javascript">export const getUserData = (params, options = {}) => {return api.get('/api/user', params, options);
};

3. 在组件中使用封装的 API

javascript">import React, { useEffect, useState } from 'react';const MyComponent = () => {const [data, setData] = useState(null);useEffect(() => {// 使用封装的GET请求，传入参数对象getUserData({ param1: 'value1', param2: 'value2' }).then((response) => {console.log('Response:', response);setData(response);}).catch((error) => {console.error('Error:', error);});}, []);return <div>{data ? JSON.stringify(data) : 'Loading...'}</div>;
};export default MyComponent;

4. 说明

1. axiosInstance：我们创建了一个 axios 实例，设置了基础 URL 和请求超时时间。通过实例可以添加请求和响应的拦截器。
2. buildUrl 函数：用于将 GET 请求的参数对象转换成 URL 的查询字符串格式，并拼接到 URL 上。
3. 封装 get、post、put、delete 方法：分别处理不同的请求方式，get 和 delete 会将参数对象拼接到 URL 上，post 和 put 会将参数作为请求体发送。
4. 拦截器：可以在拦截器中处理全局的请求设置，比如设置 Authorization 请求头，或者在响应拦截器中统一处理错误。

这样你在项目中就可以简单地调用封装后的 get、post 等方法，同时 get 请求也可以自动将对象参数拼接到 URL 上，提升了代码的简洁性和复用性。