React 项目中使用 axios 进行 HTTP 请求时，封装 get、put、post 等请求方法

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

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

1. 安装 axios

npm install axios

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

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,
};

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

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

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

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 上，提升了代码的简洁性和复用性。