Почему 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!!"))

Проблема в том, что этот фрагмент кода не показывает ошибок, даже если 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 (), не отклоняет состояние ошибки HTTP, даже если ответ является HTTP 404 или 500. Вместо этого он будет разрешен в обычном режиме (с помощью okстатус установлен в false), и он будет отклоняться только при сбое сети или если что-либо помешает завершению запроса.

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

Я предпочитаю использовать библиотеки, такие как Axios , потому что я предпочитаю его поведение по сравнению со стандартной выборкой (которая должна быть заполнена в любом случае).