处理自定义 SWR 挂钩中的错误

Question

我编写了一个自定义钩子，它使用 SWR 从我的 API 中检索数据，同时为请求设置“身份验证”标头。

钩子对所有成功的请求都可以正常工作，但我希望能够处理失败的请求（400 个状态代码）。

我可以使用来自const res = await fetch(url 的结果访问状态代码，但是如何将error 参数中的错误返回给钩子的调用者？

import useSWR from 'swr';

export default function useAPI(path) {
  const auth = useAuth();

  const { data, error, isValidating, mutate } = useSWR(
    !path ? null : `${process.env.NEXT_PUBLIC_API_URL}${path}`,

    async (url) => {
      const res = await fetch(url, {
        headers: {
          Authorization: `Bearer ${auth.user.token}`,
          accept: 'application/json',
        },
      });

      return res.json();
    }
  );
  return { data, error, isValidating, mutate };
}

Answer 1

来自SWR Error Handling 文档：

如果在 fetcher 内部抛出错误，钩子会返回 error。

在您的情况下，您可以简单地在 fetcher 中处理 400 状态代码响应，并在处理完成后抛出错误。

const { data, error, isValidating, mutate } = useSWR(
    !path ? null : `${process.env.NEXT_PUBLIC_API_URL}${path}`,
    async (url) => {
        const res = await fetch(url, {
            headers: {
                Authorization: `Bearer ${auth.user.token}`,
                accept: 'application/json'
            }
        });

        if (res.statusCode === 400) {
            // Add your custom handling here

            throw new Error('A 400 error occurred while fetching the data.'); // Throw the error
        }

        return res.json();
    }
);