Что и где добавить к коду чтобы если API вернет ошибку она обрабатывалась?

Question

[georgedubinsky8888]

У меня есть приложение, написанное на Redux-React. В файле index.js (action) я написал запрос к Api, а затем API возвращает мне данные. Но один человек сделал замечание по поводу этого кода, он сказал:

Никак не обрабатывается, если API вернул ошибку.

Маленька часть index.js(action):

export function fetchData(day) {
  return async dispatch => {
    dispatch({ type: "LOAD_DATA_START", day });
    const response = await fetch(`https://ссылка на Api`);
    const data = (await response.json()).body;
    dispatch({ type: "LOAD_DATA_END", payload: { data, day } });
  };
}

Что здесь и каким образом дописать чтобы если АPI вернет ошибку она обрабатывалась? Если можно дайте ответ кодом, так как я никогда такого не делал...
P.S. Заменять на конструкцию then нельзя. Должно быть async-await

Answer 1

[vadimparinov]

export function fetchData(day) {
return async dispatch => {
dispatch({ type: "LOAD_DATA_START", day });
try{
const response = await fetch(`https://ссылка на Api`);
const data = await response.json().body;
}catch(e){
console.log(e)
}
dispatch({ type: "LOAD_DATA_END", payload: { data, day } });
};
}

Comments

[hzzzzl]

только data не выйдет из блока try, ее лучше заранее объявить как пустой объект/массив/итд

сейчас кстати проверил, если try/catch/finally то у try/catch и finally тоже разные скоупы

[georgedubinsky8888]

hzzzzl, спасибо) может посоветуете как тогда написать?

Answer 2

[Анатолий Куликов]

В зависимости от того, что может прийти от API, нужно обрабатывать поведение. Например, на одном из проектов у меня было так - приходил объект, у которого был ключ state, в зависимости от его значения было либо одно, либо другое. Так и здесь - пропишите варианты того, что может прилететь в ответку и обрабатывайте их.

Answer 3

[Арслан Исаев]

Для всего этого уже давно есть promise. В resolve храните нормальные ответы, в reject отправляйте как ошибки по статусу, так и ошибки приходимые с бэкенд (например свойством error). Затем вызываете у промиса then (падает resolve) и catch (падает reject)

Comments

[abberati]

Так у ТС’а и так код на промисах. Не узнали их?

[Арслан Исаев]

abberati, Так он их так криво использует)) поэтому и написал, чтобы почитал) а то слишком много банальных вопросов, которые решаются чтением документации)

Answer 4

[Lessap]

Мы говорим говорим о ошибках, возвращаемых апи, к которому вы обращаетесь, а не fetch api, верно? Тогда стоит обратить внимание, что какой бы статус не вернулся на запрос (будь то 404 или 200), fetch не будет возвращать error, так что нужно писать обработчик на нужный(е) варианты. Статус хранится в свойстве status объекта Response. Так же у Response есть свойство ok, которое принимает значение true в случаях, если статус входит в интервал 200-299.
Тем не менее, не всегда в случаях ошибки сервер возвращает невалидный статус, так что решение разнится от варианта к варианту.