我通过实现一个自定义的Fatcher类和一个钩子useRequest来实现Fatcher功能来处理这种情况。这使得所有API请求功能更容易，并且更新任何部分也非常容易。下面是我的代码，希望对大家有帮助：
Fatcher。ts

type Token = string | null | undefined;
type BaseHeader = Object | undefined;
type Url = string;

class Fetcher {
    token: Token = undefined;
    logger: any = console;
    log: boolean = true;
    baseHeader: BaseHeader = {
        Accept: "application/json",
        "Content-Type": "application/json",
    }

    constructor(_token: Token = undefined, _log: any = true, _baseHeader: BaseHeader = undefined) {
        if (_token) this.token = _token;
        if (_baseHeader) this.baseHeader = _baseHeader;
        this.log = _log;
    }

    getHeader() {
        return {
            ...this.baseHeader,
            Authorization: this.token && `token ${this.token}`,
        }
    }

    get(_url: Url) {
        return this.fetch_data(_url, {
            method: "GET",
            headers: this.getHeader()
        })
    }

    post(_url: Url, _body: Object) {
        return this.fetch_data(_url, {
            method: "POST",
            headers: this.getHeader(),
            body: JSON.stringify(_body),
        })
    }

    put(_url: Url, _body: Object) {
        return this.fetch_data(_url, {
            method: "PUT",
            headers: this.getHeader(),
            body: JSON.stringify(_body),
        })
    }

    patch(_url: Url, _body: Object) {
        return this.fetch_data(_url, {
            method: "PATCH",
            headers: this.getHeader(),
            body: JSON.stringify(_body),
        })
    }

    delete(_url: Url, _body: Object | undefined = undefined) {
        return this.fetch_data(_url, {
            method: "DELETE",
            headers: this.getHeader(),
            body: _body && JSON.stringify(_body),
        })
    }
}

export default Fetcher;

使用请求。ts

这个钩子使用Fatcher类，如果authenticated为true，则获取存储在redux中的令牌。在您的情况下，您可以从存储令牌的位置获取令牌，例如本地存储。

import {useSelector} from "react-redux";
import {RootState} from "../../redux/reducers";
import getLogger from "../logger/getLogger";
import Fetcher from "./fetcher";

const useRequest = (authenticated = false, _log = true, _token: any = undefined) => {
    if (authenticated && !_token) _token = useSelector((state: RootState) => state.auth.token);
    const logger = getLogger();
    if (logger.showLog('info') && _log) _log = true;
    return new Fetcher(_token, _log);
};

export default useRequest;

不需要提供任何标题附加标题信息。用法如下所示：

const request = useRequest(true);
request.get(REST_API_ENDPOINTS.auth.v1.userInfo()).then((response) => {
                dispatch(userInfoUpdateAction(response));

它可以以更简化的方式实现，但一旦设置好，就不需要再进行配置了。我更喜欢更详细的实现。希望对你有帮助，