如何在React函数组件外使用自定义useAxios钩子？

你当前的useAxios钩子因为依赖React的useState和useEffect，只能在函数组件内使用。要在Redux的createAsyncThunk这类组件外场景复用请求逻辑，核心思路是把纯请求逻辑从钩子中抽离成独立工具函数，让钩子和Redux异步逻辑都基于这个工具函数实现。

步骤1：抽离独立的Axios请求工具函数 #

把原钩子中发送请求的核心逻辑单独提取出来，这个函数只负责发起请求、处理响应和错误，不涉及React状态：

import config from "../config";
import axios from "axios";

// 独立的Axios请求工具，可在任意场景调用
export const createAxiosRequest = async (axiosParams, signal) => {
  const { method, url, requestConfig = {} } = axiosParams;
  try {
    const res = await axios[method.toLowerCase()](
      `${config.backendUrl}${url}`,
      {
        ...requestConfig,
        // 支持传入AbortController信号，用于取消请求
        signal: signal || requestConfig.signal,
      }
    );
    return { data: res.data, error: null };
  } catch (err) {
    return { data: null, error: err.message };
  }
};

步骤2：修改原useAxios钩子，复用工具函数 #

让原钩子调用抽离后的工具函数，保留组件内的状态管理能力：

import React, { useState, useEffect } from "react";
import { createAxiosRequest } from "./axiosUtils";

const useAxios = (axiosParams) => {
  const [response, setResponse] = useState([]);
  const [error, setError] = useState("");
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    const controller = new AbortController();

    const fetchData = async () => {
      const { data, error } = await createAxiosRequest(axiosParams, controller.signal);
      if (error) {
        setError(error);
      } else {
        setResponse(data);
      }
      setLoading("fullfilled");
    };

    fetchData();

    // 组件卸载时取消请求
    return () => controller.abort();
  }, [axiosParams]); // 添加axiosParams作为依赖，参数变化时重新发起请求

  return [response, error, loading];
};

export default useAxios;

步骤3：在Redux createAsyncThunk中使用工具函数 #

直接在异步Thunk里调用抽离的工具函数，结合Redux的错误处理机制：

import { createAsyncThunk } from "@reduxjs/toolkit";
import { createAxiosRequest } from "./axiosUtils";

// Redux异步Thunk，复用Axios请求逻辑
export const fetchData = createAsyncThunk("data/fetch", async (_, { rejectWithValue }) => {
  const { data, error } = await createAxiosRequest({
    method: "GET",
    url: "/api/data",
    // 如需配置请求头、参数等，直接在requestConfig里传递
    requestConfig: {
      // headers: { Authorization: `Bearer ${token}` }
    }
  });
  
  if (error) {
    // 传递错误信息给Redux的reducer
    return rejectWithValue(error);
  }
  // 返回数据给reducer
  return data;
});

说明 #

• 抽离后的工具函数完全脱离React依赖，可在任何JavaScript环境（Redux、Node.js脚本等）中使用
• 原useAxios钩子仍保留组件内的状态管理（loading、response、error），适配组件场景
• 若需要在Thunk中支持请求取消，同样可以创建AbortController并传入信号

内容的提问来源于stack exchange，提问作者STRESSUNFIT