当前位置：首页 > React

react如何封装请求

2026-02-12 07:30:30React

封装请求的常见方法

在React中封装HTTP请求通常涉及创建可复用的函数或钩子，以减少重复代码并统一处理错误、loading状态等。以下是几种典型实现方式：

使用axios实例封装

创建基础的axios实例，配置拦截器和默认参数：

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

const instance = axios.create({
  baseURL: 'https://api.example.com',
  timeout: 10000,
});

// 请求拦截器
instance.interceptors.request.use(config => {
  config.headers.Authorization = `Bearer ${localStorage.getItem('token')}`;
  return config;
});

// 响应拦截器
instance.interceptors.response.use(
  response => response.data,
  error => {
    console.error('API Error:', error);
    return Promise.reject(error);
  }
);

export default instance;

自定义hook封装

创建useFetch钩子管理请求状态：

// hooks/useFetch.js
import { useState, useEffect } from 'react';
import request from '../utils/request';

function useFetch(url) {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      setLoading(true);
      try {
        const result = await request.get(url);
        setData(result);
      } catch (err) {
        setError(err);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, [url]);

  return { data, loading, error };
}

export default useFetch;

高阶组件封装

通过HOC包装组件提供请求能力：

// hocs/withRequest.js
import React from 'react';
import request from '../utils/request';

function withRequest(WrappedComponent) {
  return function WithRequest(props) {
    const [data, setData] = React.useState(null);

    const fetchData = async (url) => {
      try {
        const result = await request.get(url);
        setData(result);
      } catch (error) {
        console.error(error);
      }
    };

    return <WrappedComponent {...props} data={data} fetchData={fetchData} />;
  };
}

export default withRequest;

请求工厂函数

创建不同类型的请求方法：

// services/api.js
import request from '../utils/request';

export const getUsers = (params) => request.get('/users', { params });
export const createUser = (data) => request.post('/users', data);
export const updateUser = (id, data) => request.put(`/users/${id}`, data);

关键优化点

错误处理：统一在拦截器中处理HTTP错误码和业务错误码
取消请求：使用AbortController避免组件卸载后的内存泄漏
TypeScript支持：为请求函数添加类型定义
缓存策略：根据需要实现SWR或缓存去重
Mock适配：开发环境注入Mock服务拦截请求

使用示例

组件内调用自定义hook：

function UserList() {
  const { data, loading, error } = useFetch('/users');

  if (loading) return <div>Loading...</div>;
  if (error) return <div>Error!</div>;

  return (
    <ul>
      {data?.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

react如何封装请求