Как отлавливать ошибки fetch?

171

05 апреля 2019, 00:40

В моей программе, я вывожу forks репозитория, который вбиваю вручную.

Естественно хочу, в случае, если допущена ошибка ввода, обработать ее, например, вывести сообщение, что данный репозиторий не найден, и чтобы в консоли не было никаких сообщений об ней.

Вот так выглядит рабочий пример без обработки ошибок:

fetch(`https://api.github.com/repos/gudh/ihover/forks`) 
    .then(res => res.json()) 
    .then(data => console.log('+', data))

А вот здесь я пытаюсь обработать ошибку, чтобы понять, где мне писать код, который будет выводить сообщение о том, что не найден репозиторий, я вызываю console.log, но ни .catch ни try не вызывают console.log, и все равно ошибка падает в консоль.

try { 
    fetch(`https://api.github.com/repos/gudh/ihove/forks`) 
        .then(res => res.json()) 
        .then(data => console.log('+', data)) 
        .catch(() => console.log(12)); 
} catch (e) { 
    console.log(132) 
}

Если откроете консоль браузера, увидите, что туда попала ошибка:

Answer 1

Как указано в справке:

В отличие от jQuery.ajax, Promise, который возвращает fetch() переходит в состояние rejected только при ошибке сети или если что-то препятствует завершению запроса. В противном случае наступает состояние resolved, и в случае если HTTP статус соответствует ошибке, например 400 или 500, свойству ok устанавливается значение false.

Исходя из этого, можно добавить проверку этого свойства, и в зависимости от этого возвращать Promise.rejected если требуется.

Например:

fetch(`https://api.github.com/repos/gudh/ihove/forks`) 
  .then(res => res.ok ? res : Promise.reject(res)) 
  .then(data => console.log('+', data)) 
  .catch(() => console.log('some error'));

Answer 2

Проверяйте статус ответа, формат ответа и т.д. В случае ошибок, обрывайте цепочку промисов генерацией ошибки:

let error = new Error(res.statusText);
throw error

Объект Error передается в блок catch

Если в любом из обработчиков then произойдет ошибка javascript, то также сработает блок catch

    fetch(`https://api.github.com/repos/gudh/ihove/forks`) 
        .then((res) => { 
            if (res.status >= 200 && res.status < 300) { 
                return res; 
            } else { 
                let error = new Error(res.statusText); 
                error.response = res; 
                throw error 
            } 
        }) 
        .then((res) => { 
            if (res.headers['content-type'] !== 'application/json') { 
                let error = new Error('Некорректный ответ от сервера'); 
                error.response = res; 
                throw error 
            } 
            return res; 
        }) 
        .then(res => res.json()) 
        .then(data => console.log('+', data)) 
        .catch((e) => { 
            console.log('Error: ' + e.message); 
            console.log(e.response); 
        });