Почему не срабатывает Try Catch в JavaScript?

Question

[PunyDevil]

if (!city) {
      let fetchResult;
      try {
        const url = `https://ipinfo.io/json?token=${APIKEYS.ipinfo}`;
        fetchResult = await fetch(url)
      } catch (err) {
        console.log('hello');
        this.city = 'Minsk';
        return false;
      }

Почему в таком блоке не отлавливается ошибка возникающая при fetch?

Comments

[Kovalsky]

У меня работает

[G F]

Покажи ошибку хоть

[PunyDevil]

G F, если закинуть неправильный токен или у него кончится лимит, то выкидывает ошибку 403

[Пашенька]

PunyDevil, try catch ловит исключения, http 403 - это не исключение. Это просто форбиддэн. Нужно проверять сами данные ответа, чтобы понять успешность запроса.

Answer 1

[Владимир]

Вы какую ошибку пытаетесь отловить?
При 404 ошибке fetch все равно завершится доожным образом просто вернет код отличный от 200 и не OK
https://developer.mozilla.org/en-US/docs/Web/API/F...
https://developer.mozilla.org/en-US/docs/Web/API/F...

const url = `https://ipinfo.io/json`;
        fetch(url).then(response => {
          console.log(response.status, response.ok)
          if (response.ok) {
            response.json().then(data => {
            console.log(data)
            })
          }
        })

const url = `https://ipinfo.io/jsonson`;
        fetch(url).then(response => {
          console.log(response.status, response.ok)
          if (response.ok) {
            response.json().then(data => {
            console.log(data)
            })
          }
        })

Если бы fetch кидал ошибку, вы бы ее отловили

function some() {
  return Promise.reject("Hello")
}

async function f() {
  try {
    return await some();
  } catch (error) {
    console.log("Error", error)
  }

}

f().then(data => {
  console.log("Data", data)
});

Comments

[PunyDevil]

при ошибке 403 как я понимаю тоже считается завершенным? Но почему тогда сразу выкидывает ошибку в консоль?

[Владимир]

PunyDevil, Попробуй через промисы, увидишь внутри, результат то через один await ты все равно не получишь.
Вообще рекомендую пихать async await только когда знаешь матчасть и понимаешь как они работают

Answer 2

[Mazino]

Если хотите сахарно работать с запросами в trycatch стиле посмотрите на axios.
Он такой код как:

async getData() {
  try {
   const { data } = axios.get('/url') 
  }catch(e) {
    console.error(e)
  }
}

Обработает так как вы того ждете. Но сразу скажу, что в данном контексте он делает что-то вроде:

async getData() {
    try{
      const response = fetch('/url')
      if(response.status>= 400 && response.status<= 599) throw new Error(`Http exeption code: ${response.status}`)
    }catch(e){
      console.error(e)
    }
  }