1

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

1 回答 1

2

来自SWR 错误处理文档：

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

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

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();
    }
);
于 2021-03-27T12:50:21.010 回答