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!!"))

问题在于，即使url不存在，此代码段也未显示任何错误。另外，console.logs语句中的两个if从未到达，getData()函数总是成功的……即使有错误...

Answer 1

您只需从catch中删除getData语句，它便会按照您的预期工作

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），并且只会在网络故障或是否有任何阻止请求完成的事情。

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

我更喜欢使用Axios之类的库，因为我更喜欢它的行为而不是标准获取（无论如何都必须填充）。

为什么即使在捕获错误后仍返回获取？

2 个答案: