Как правильно обработать неудавшийся fetch?

Question

[tantumus21]

Столкнулся с такой проблемой: если пытаюсь загрузить данные по заведомо неверному URL, то скрипт останавливается на строке const responseData = await response.json();, и до проверки на response.ok просто не доходит. Но в видео-уроке все работает - создается error, который далее обрабатывается через try/catch. Также в комментариях я не видел и одного сообщения с проблемой как у меня.

async loadList(context) {
  const response = await fetch('somewebsite.com');
  const responseData = await response.json();

  if(!response.ok) {
    const error = new Error(responseData.message || 'не удалось получить данные');
    throw error;
  }

Что я сделал не так? Или с момента выпуска урока работа fetch изменилась?

Answer 1

[Alex]

Преверку на response.ok нужно делать ДО того, как попытаться получить данные в response.json()

Comments

[tantumus21]

спасибо, исправлю, как вы сказали. Но почему на видео все работало именно в том порядке, как я указал?

[Alex]

tantumus21, Скорее всего там было что-то другое. Либо видео так записано. Это всегда так работало.

[Kovalsky]

tantumus21, для того чтоб дать нам понять о чем речь не достаточно сказать "а вот на том видео всё работало", нужно скинуть весь код который был на том самом видео, или дать ссылку на видео и нужный таймкод

[tantumus21]

Kovalsky, ссылку на видео дать не смогу - видео из платного курса. Но скрин - пожалуйста
P.S. далее эта часть никак не изменялась - код такой как на скрине

[Alex]

molekulyarniy, Потому, что сначала вам нужно проверить удалось ли вообще достучаться до сервера. response.ok будет false и в тех случаях, когда из-за проблем с сетью не удалось подключиться. Или, например, на запрашиваемом сервере произошла ошибка и он не вернул ничего либо вернул текст ошибки (что угодно но не json).

Поэтому, сначала нужно как-либо убедится что мы получили ответ, и что ответ в формате json. И уже только после пытаться ответ распарсить.

Answer 2

[Валерий]

Оберните в try/catch

async loadList(context) {
try {
  const response = await fetch('somewebsite.com');
  const responseData = await response.json();

  if(!response.ok) {
    const error = new Error(responseData.message || 'не удалось получить данные');
    throw error;
  } catch(e) {...}
}

Answer 3

[zkrvndm]

async getJSON(url) {
	try {
		var result = await (await fetch(url)).json();
		console.log('Запрос успешно выполнен:');
		console.dir(result);
		return result;
	}
	catch(err) {
		console.log('Ошибка при выполнении запроса:');
		console.dir(err);
		return false;
	}
}