React封装axios请求方法

1.安装Axios

首先安装axios

css 复制代码

npm install axios

2.创建request.js

在util目录下创建request.js文件，用于封装axios请求

css 复制代码

// util/request.js
import axios from 'axios';

// 创建 Axios 实例
const instance = axios.create({
  baseURL: process.env.REACT_APP_API_BASE_URL, // 从环境变量中读取
  timeout: 10000, // 请求超时时间
  headers: {
    'Content-Type': 'application/json',
  },
});

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

// 响应拦截器
instance.interceptors.response.use(
  (response) => {
    // 对响应数据做些什么
    return response.data;
  },
  (error) => {
    // 对响应错误做些什么
    if (error.response) {
      switch (error.response.status) {
        case 401:
          // 处理未授权的情况
          break;
        case 404:
          // 处理未找到资源的情况
          break;
        default:
          // 处理其他错误
          break;
      }
    }
    return Promise.reject(error);
  }
);

// 封装 GET 请求
export const get = (url, params) => {
  return instance.get(url, { params });
};

// 封装 POST 请求
export const post = (url, data) => {
  return instance.post(url, data);
};

// 封装 PUT 请求
export const put = (url, data) => {
  return instance.put(url, data);
};

// 封装 DELETE 请求
export const del = (url) => {
  return instance.delete(url);
};

3.在组件中使用封装的请求

可以在 React 组件中使用封装好的请求方法。

css 复制代码

// src/components/ExampleComponent.js
import React, { useEffect, useState } from 'react';
import { get, post } from '../api';

const ExampleComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 使用封装的 GET 请求
    get('/posts')
      .then((response) => {
        setData(response);
      })
      .catch((error) => {
        console.error('Error fetching data:', error);
      });

    // 使用封装的 POST 请求
    post('/posts', {
      title: 'foo',
      body: 'bar',
      userId: 1,
    })
      .then((response) => {
        console.log('Post created:', response);
      })
      .catch((error) => {
        console.error('Error creating post:', error);
      });
  }, []);

  return (
    <div>
      <h1>Example Component</h1>
      {data && (
        <ul>
          {data.map((item) => (
            <li key={item.id}>{item.title}</li>
          ))}
        </ul>
      )}
    </div>
  );
};

export default ExampleComponent;

4.axios和umi-request封装请求的区别

umi-request:umi-request 是 Umi 框架内置的请求库，基于 fetch 封装，专为 Umi 生态设计。适用于使用 Umi 框架的项目。umi-request 的拦截器设计更简洁，直接通过 interceptors 方法实现。

axios:axios 是一个独立的、广泛使用的 HTTP 请求库，基于 XMLHttpRequest 封装。适用于任何 React 项目（无论是否使用 Umi）。axios 的拦截器设计更灵活，支持请求和响应拦截。