如何检查捕获的异常是否因触发AbortController而引发？

Question

我使用 React With TypeScript 创建了一个简单的博客网站，并制作了一个服装挂钩 (useFetch)。该挂钩在

useEffect

挂钩内获取数据。 这是代码：

const useFetch  = (url : string) => {
    interface Blogs{
        title:string,
        body:string,
        author?:string,
        id:number;
    }
    const [data , setData] = useState<Blogs[] | null>(null) 
    const [isPending , setIsPending] = useState<boolean>(true)
    const [error , setIsError] = useState(null)
    useEffect(()=>{  
        const controller = new AbortController();
        // const signal = controller.signal;

       setTimeout(() => {
            fetch(url , {signal:controller.signal})
            .then(res=> res.json())
            .then(data=> {
                setData(data)
                setIsPending(false)
            }).catch(err=>{
                if(err.message === "AbortError"){
                    console.log("Fetch Aborted");
                }else{
                    setIsError(err.message)
                    setIsPending(false)
                }
            })    
       }, 1000);
        return ()=>controller.abort();
    } , [url])

    return { data , isPending , error}
}

我添加了一个

setTimeout

来检查中止控制器是否工作。 获取带来数据，然后捕获..并显示以下消息：

signal is aborted without reason

原始

content.tsx

代码：

function Content(){

    const {data : blogs , isPending , error} = useFetch("http://localhost:800/blogs");
    let [name , setName]  = useState("Eshada");


    function handleClick():void {
        name = "Essam"
        setName("Essam")
        console.log(`Hello mr ${name} it's nice to meet you !!`);
    }

    
  

    return(
        <div className="content">
            <div className="container">
                <div className="articles-container">
                    {isPending && <div> Loading...</div>}
                    {error && <div> Some Thing went wrong : {error} </div>}
                    {blogs && <BlogList  name ="All Blogs" blogs = {blogs}/>} 
                </div>
                <button onClick={handleClick}>Click Me!</button>

            </div>
        </div>
    )
}

Answer 1

我发现了，我只是将我的 Catch 代码更改为

.catch((err) => {
                if (err.name === 'AbortError') {
                    console.log('Fetch aborted');
                } else {
                    setError(err.message);
                    setIsPending(false);
                }
            });

它的工作..在检查err.message的行中我尝试了err.name并且它的工作！