Почему скрипт с неправильным url зависает и не отрабатывает ошибку?

Question

[AlexNew22]

const fakeUrl = 'https://api.github.co'

function getUser(url) {
	return new Promise((resolve, reject) => {
  	fetch(url).then(data => resolve(data.json())).catch(err => reject(err))
  })
}

const app = async () => {
	const result = await getUser(fakeUrl)
  console.log(result)
  console.log('end')
}

app()

Answer 1

[Егор Данченко]

Потому что вы и не обрабатываете ошибку. Оберните вызов метода await getUser() в try catch.

const fakeUrl = 'https://api.github.co'

function getUser(url) {
  return new Promise((resolve, reject) => {
  	fetch(url).then(data => resolve(data.json())).catch(err => reject(err))
  })
}

const app = async () => {
  try {
  	const result = await getUser(fakeUrl)
  	console.log(result)
  } catch (error) {
  	console.log('error', error)
  }
  
  console.log('end')
}

app()

Comments

[FairyTaleComposer]

Ошибка у автора обрабатывается в промисе в catch(err => reject(err))

[Егор Данченко]

FairyTaleComposer, но во внешном коде обработчика же нет.

[FairyTaleComposer]

Егор Данченко, не нужно обрабатывать одну и ту же ошибку дважды.

[Егор Данченко]

FairyTaleComposer, Да, обработчик на методе fetch() весит, но промис использует метод reject(), который не обрабатывается во внешном коде. Из-за этого и возникает ошибка.

[FairyTaleComposer]

Егор Данченко, и кстати, у Вас в коде выводится object Error без сообщения об ошибке. Если исправите error на error.message там, где выводите её в консоль, то увидите сообщение об ошибке, то есть network error.

[Егор Данченко]

Ну мы же отловили ошибку, она теперь не останавливает работу кода. А как оно ещё должно работать?

[FairyTaleComposer]

Егор Данченко, Вы правы. Я сейчас проверяла код автора внимательно как раз, и в ошибке пишется, что ошибка не поймана. До этого когда копировала код, промахнулась сообщением, и скопировала Ваш код, вместо автора, а потом увидела, что до конца наверх не прокрутила. Просто рядом два похожих сообщения. Сорри за невнимательность, мозг плохо работает. И когда писала второй коммент, не видела Вашего пояснения про фетч.. Да, сейчас в ходе проверки ясно, что всё дело в reject. Меня сбил промис, я обычно такое делала без лишних обёрток и обрабатывала ошибку сразу в catch без всяких reject. В данном случае получается задача вывести ошибку наверх, за пределы промиса. Тогда конечно, её нужно снаружи и обработать.

[AlexNew22]

Егор Данченко, почему в консоли ошибка видна, как [object Error] { ... }, а не как объект со списком свойств?
Как посмотреть весь список в консоли, что я могу получить из ошибки?

[Егор Данченко]

AlexNew22, наверное, применяется метод toString(), и выводится строка, а не объект ошибки. Если обращаться к свойствам объекта ошибки, то все ок. Ну или попробуйте использовать метод console.dir(error).

Answer 2

[historydev]

await getUser(fakeUrl).then(console.log).catch(console.error);