如何解决处理自定义 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();
}
);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。