React：清理功能无法正确捕获错误？

Question

我正在尝试中止 useEffect 清理函数中的提取，但似乎即使代码中捕获了错误并记录了“错误捕获”，仍然有一个默认的 js 错误在某处触发...

要测试的简单代码：

useEffect(() => {
    const url = "https://swapi.dev/api/films/1/";
    const controller = new AbortController()
    fetch(
        url, {
            method: 'GET',
            headers: {
                'Content-Type': 'application/json',
            },
            signal: controller.signal,
        }
    ).then(function(response) {
        response.json().then(function(data) {
            console.log('Success', data)
        }).catch(function(error) {
            console.log('Json error', url)
        })
    }).catch(function(error) {
        console.log('Error catching', url)
    })

    return () => {
        console.log("Cleanup")
        controller.abort()
    }
}, [])

输出：

我尝试用 try/catch 替换 then/catch 但我认为我正确使用了它，无论如何它没有改变任何东西。

我希望在函数中捕获错误，并且不会触发 js 错误（console.error）的默认行为。

感谢您的任何解决方案，我已经测试了很多不同的东西，但我仍然无法理解发生了什么。

Answer 1

你忘记了

return

你从

response.json

得到的承诺。

一般来说，我建议更改代码以使用

await

，这样代码会变得更具可读性，并且不太可能发生此类错误：

useEffect(() => {
    const url = "https://swapi.dev/api/films/1/"
    const controller = new AbortController()

    const fetchData = async () => {
        try {
            const response = await fetch(url, {
                method: 'GET',
                headers: {
                    'Content-Type': 'application/json',
                },
                signal: controller.signal,
            })
            if (!response.ok) {
                throw new Error('Network response was not ok')
            }
            const data = await response.json()
            console.log('Success', data)
        } catch (error) {
            if (error.name === 'AbortError') {
                console.log('Fetch aborted')
            } else {
                console.log('Error catching', url, error)
            }
        }
    }

    fetchData()

    return () => {
        console.log("Cleanup")
        controller.abort()
    }
}, [])