axios 将拦截器与react-query一起使用

jk9hmnmh 于 2022-11-05 发布在 iOS

关注(0)|答案(1)|浏览(241)

我在我的应用程序中有一堆自定义的react-query挂钩，例如：

export const useItems = () => {
  return useQuery(["items"], async () => {
    const response = await axios.get("/api/items");

    if (response.status !== 200) {
      throw response.data.error ?? "Unknown error";
    }

    return response.data;
  });
}

export const useVenueSearch = (placeId) => {
  return useQuery(["places", placeId], async () => {
    const response = await axios.get(`/api/places/${placeId}`);

    if (response.status !== 200 && response.status !== 404) {
      throw response.data.error ?? "Unknown error";
    }

    return response.data;
  });
}

...

在任何时间点，在任何这些自定义钩子API调用中，服务器可能会决定用户需要接受新的条款和条件才能继续使用产品。在这种情况下，服务器会返回一个已知的4xx响应。
集中处理此4xx响应和更新React状态（显示请求用户接受条款和条件的模态）的最佳方式是什么？

附加问题（类似场景）

给定一组自定义的mutation钩子，我想引入一个人工延迟，这样请求就不会在1000ms之前完成。

axios

来源：https://stackoverflow.com/questions/73524927/using-interceptors-with-react-query

1条答案

按热度按时间

3pmvbmvn1#

您可以使用axios提供的拦截器，甚至可以使用它的retry方法再次命中API。

// Add a request interceptor
axios.interceptors.request.use(function (config) {
    // Do something before request is sent
    return config;
  }, function (error) {
    // Do something with request error
    return Promise.reject(error);
  });

// Add a response interceptor
axios.interceptors.response.use(function (response) {
    // Any status code that lie within the range of 2xx cause this function to trigger
    // Do something with response data
    return response;
  }, function (error) {
    // Any status codes that falls outside the range of 2xx cause this function to trigger
    // Do something with response error
    return Promise.reject(error);
  });

https://axios-http.com/docs/interceptors，但是除此之外，您需要创建自己 Package 器来完成这一部分，但是react-query没有提供拦截器。

赞(0）回复(0）举报 2022-11-05

我来回答

axios 将拦截器与react-query一起使用

附加问题（类似场景）

1条答案

相关问题

热门标签

最新问答