为什么即使在捕获错误之后 fetch 也会返回？

Question

我正在尝试编写一个通用的getData() 函数，我可以使用不同的 url 调用它，并在从服务器返回数据时采取不同的操作。

function getData(url){
        console.log("loading: " + url)
        return fetch(url)
            .then((response) => {
                console.log("received response")
                console.log(response.status)
                if(response.status >= 200 && response.status < 300)                 { 
                    console.log("url returned data...")
                    return response.json()
                } else {
                    console.log("url did not return data...")
                    throw new Error("The url did not return data")
                }
             })
             .catch((err) => {return err})
}
    
getData("notexisting.json")
         .then(data => console.log("success!!"))
         .catch(err => console.log("error!!"))

问题是这段代码sn-p即使url不存在也没有显示错误。另外，if 语句中的两个console.logs 永远不会到达，getData() 函数总是成功的......即使有错误......

Answer 1

您可以从getData 中删除catch 语句，它会按照您的预期工作

function getData(url){
        console.log("loading: " + url)
        return fetch(url)
            .then((response) => {
                console.log("received response")
                console.log(response.status)
                if(response.status >= 200 && response.status < 300)                 { 
                    console.log("url returned data...")
                    return response.json()
                } else {
                    console.log("url did not return data...")
                    throw new Error("The url did not return data")
                }
             })
}

getData("notexisting.json")
         .then(data => console.log("success!!"))
         .catch(err => console.log("error!!"))

// output is error!!

Answer 2

来自文档：

从 fetch() 返回的 Promise 不会拒绝 HTTP 错误状态 即使响应是 HTTP 404 或 500。相反，它会解析 通常（ok状态设置为false），它只会拒绝 网络故障或是否有任何事情阻止请求完成。

参考：https://developer.mozilla.org/it/docs/Web/API/Fetch_API/Using_Fetch

我更喜欢使用像 Axios 这样的库，因为我更喜欢它与标准 fetch 的行为（无论如何都必须填充）。