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

问题描述

我编写了一个自定义钩子，它使用 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,mutate };
}

解决方法

来自 SWR Error Handling 文档：

如果在 fetcher 中抛出错误，钩子将返回 error。

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