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

Question

我编写了一个自定义挂钩，它使用 SWR 从我的 API 检索数据，同时为请求设置 'Authentication' header。

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

我可以使用 const res = await fetch(url 的结果访问状态代码，但是我如何 return 将 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 文档：

If an error is thrown inside fetcher, it will be returned as error by the hook.

在您的情况下，您可以简单地在获取程序中处理 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();
    }
);

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

Handling errors within custom SWR hook

reactjs

next.js

swr