问题描述
我使用了一个共享的 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);