JS Обещания - catch () ничего не возвращает

Question

Таким образом я получаю данные из API и пытаюсь уловить ошибку 404, если пользователь ищет неправильный город, но не работает.

const search = evt => {
    if (evt.key === "Enter") {
      fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
        .then(res => res.json())
        .then(result => {
          setWeather(result);
          setQuery('');
        }).catch(() => console.log("error"));
    }
  }

консоль

Answer 1

Как уже упоминалось, docs, поскольку fetch не выполняет перехват состояния 404 или 500, вы можете имитировать поведение c, выдавая ошибку и перехватывая в разделе catch.

fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
.then((response) => {
    if(response.status == 404){
        throw '404 page not found';
    }
    return response.json();
})
.then((response) => {
    console.log('your JSON string ',response);
})
.catch((err) => {
    console.error(err);
});

Answer 2

Ваш код работает хорошо, как вы можете видеть:

    const search = evt => {
        if (evt.key === "Enter") {
          fetch('http://dfsdfsdfdsfsdfdfs.com')
            .then(res => res.json())
            .catch(() => console.log("error"));
        }
      }

      search({key : 'Enter'});

Но код ошибки с сервера не считается ошибкой при fetch, поэтому вы должны проанализировать ответ самостоятельно и отреагировать соответствующим образом. Вы можете использовать res.ok, который вернет true, если код состояния находится в диапазоне 200-299. Для получения дополнительной информации вы можете проверить документацию объекта Response

Answer 3

См. Документацию: https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API/Using_Fetch

Обещание, возвращенное с fetch() , не будет отклонено из-за ошибки HTTP , даже если ответ HTTP 404 или 500. Вместо этого он будет разрешен в обычном режиме (с ok status установлен на false) и будет отклоняться только при сбое в сети или если что-либо помешало завершению запроса.

Вы должны использовать параметр ответа, предоставленный .then(response => {...}), и установить response.ok или response.status, чтобы получить ошибку 404 (или 500).

Answer 4

Я смог получить ошибку таким образом:

const search = evt => {
    if (evt.key === "Enter") {
      fetch(`${api.base}weather?q=${query}&units=metric&APPID=${api.key}`)
        .then(res => res.json())
        .then(result => {
          setWeather(result);
          setQuery('');
        }).then((data) => {
          if (data === undefined) {
            alert("City not found");
          }
        });
    }
  }