使用 useSwr 的 Axios 客户端无法发出请求

如何解决使用 useSwr 的 Axios 客户端无法发出请求

我使用了一个共享的 Axios“客户端”对象，该对象通过 React 上下文在我的应用程序中传递，这个客户端对象已经配置了 API 密钥身份验证标头和基本路径，所以我不会经常定义它。

我的问题是尝试使用 useSwr 钩子，特别是在定义提取器时。我只是无法让它工作，而且我确定我在这里遗漏了一些简单的东西。

基本上，我将 api 客户端从上下文中拉出，并使用了一个已经定义的 fetcher 函数 iv，但我什么也没得到。

这里有一些片段，

客户

const AXIOS_CLIENT_CONfig = {
    baseURL: API_BASE,timeout: 2000,};

export default class apiclient {
    client: AxiosInstance;
    accesstoken: string;
    headers: any;

    constructor(accesstoken?: string) {
        this.accesstoken = accesstoken;
        this.headers = { Authorization: `Bearer ${accesstoken}` };
        if (accesstoken) {
            this.client = axios.create({
                ...AXIOS_CLIENT_CONfig,headers: this.headers,});
        } else {
            this.client = axios.create(AXIOS_CLIENT_CONfig);
        }
    }


    fetcher(url: string): Promise<any> {
        return this.client.get(url).then((res) => res.data);
    }

组件

export default function Upload(): ReactElement {
    const { api }: IAppContext = useContext(AppContext);

    const { data,error } = useSwr(`/upload/${uploadId}`,api.fetcher,{
        refreshInterval: 5000,});

使用上面，我什么也没看到，没有请求，没有错误。 （是的，客户端运行良好，我在整个应用程序中都使用它，只是这个 fetcher 部分坏了）

只是为了测试我是否定义了以下提取器，我可以看到发出了一个请求（由于身份验证而失败）

const fetcher = (url) => axios.get(url).then((res) => res.data);

即使注销函数签名，它们在我看来也几乎一样

console.log("API FETCHER",api.fetcher);
console.log("norMAL FETCHER",fetcher);

输出

API FETCHER ƒ fetcher(url) {
      return this.client.get(url).then(function (res) {
        return res.data;
      });
    }

norMAL FETCHER ƒ fetcher(url) {
  return axios__WEBPACK_IMPORTED_MODULE_5___default().get(url).then(function (res) {
    return res.data;
  });
}

我在这里做错了什么？

解决方法

经过几个小时的折腾，我终于明白了这一点。如果其他人在尝试将 Axios 客户端反对意见与类函数一起使用时遇到这个问题，就像我在这里一样。

我没有在该特定函数的类中绑定 this 的上下文。

基本上，我需要将以下内容添加到我的 api 客户端构造函数中

// Bind "this" context
this.fetcher = this.fetcher.bind(this);