Incapaz de manejar el error 404 en axios con try y catch.

He estado intentando construir una aplicación del clima, pero tengo problemas para verificar el estado Http en caso de que un usuario introduzca intencionalmente un nombre de ciudad que no existe o en caso de que el usuario cometa un error tipográfico en el campo de entrada.

El único problema es que no puedo encontrar una forma de insertar el estado !== 200 en la promesa de axios.

El estado 200 funciona bastante bien, pero el 404 no lo hace. Estoy seguro de que hay un error en algún lugar de la promesa, pero no logro encontrar la salida.

Además, cuando consolide el error, muestra este mensaje:

error en el console.log

Uncaught (en la promesa) Error: solicitud fallida con el código de estado 404 en exports (createError.js: 16)
en exports (settle.js: 17)
en XMLHttpRequest.E (xhr.js: 66)

Javascript

try{ axios.get(https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${api_key}).then( async response => { let data = await response.data if (response.status !== 200) { throw new Error(response.status); } else { console.log(data) document.getElementById('hum').textContent = data.main.humidity; document.getElementById('feels-like').textContent = data.main.feels_like; }} ) } catch(error) { if (response.status === 404) { console.log(`Err: ${error}`); throw err; } };

Cualquier sugerencia es muy apreciada. ¡Gracias!

davy.ai

June 10, 2023 at 5:36 am

Parece que tienes la idea correcta al utilizar response.status!== 200 para verificar las solicitudes exitosas. Sin embargo, en el bloque catch, deberías verificar error.response.status === 404 en lugar de response.status === 404 ya que response puede no estar definido fuera del bloque try.

Aquí tienes una versión actualizada de tu código:

try {
  const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${api_key}`);

  if (response.status !== 200) {
    throw new Error(response.status);
  } else {
    const data = response.data;
    console.log(data);
    document.getElementById('hum').textContent = data.main.humidity;
    document.getElementById('feels-like').textContent = data.main.feels_like;
  }
} catch (error) {
  if (error.response.status === 404) {
    console.log(`Error: ${error}`);
    throw error;
  }
};

En esta versión actualizada, primero obtenemos la respuesta de la API utilizando await axios.get, y luego verificamos el código de estado. Si no es exitoso, arrojamos un nuevo error. De lo contrario, extraemos los datos y actualizamos el DOM.

En el bloque catch, verificamos error.response.status === 404 para manejar el caso de error 404. Si es un error 404, registramos el error y lo volvemos a arrojar para que pueda ser capturado nuevamente más arriba en la pila de llamadas si es necesario.

Answer

davy.ai

June 10, 2023 at 5:36 am
Parece que tienes la idea correcta al utilizar response.status!== 200 para verificar las solicitudes exitosas. Sin embargo, en el bloque catch, deberías verificar error.response.status === 404 en lugar de response.status === 404 ya que response puede no estar definido fuera del bloque try.

Aquí tienes una versión actualizada de tu código:
```
try {
  const response = await axios.get(`https://api.openweathermap.org/data/2.5/weather?q=${city}&appid=${api_key}`);

  if (response.status !== 200) {
    throw new Error(response.status);
  } else {
    const data = response.data;
    console.log(data);
    document.getElementById('hum').textContent = data.main.humidity;
    document.getElementById('feels-like').textContent = data.main.feels_like;
  }
} catch (error) {
  if (error.response.status === 404) {
    console.log(`Error: ${error}`);
    throw error;
  }
};
```
En esta versión actualizada, primero obtenemos la respuesta de la API utilizando await axios.get, y luego verificamos el código de estado. Si no es exitoso, arrojamos un nuevo error. De lo contrario, extraemos los datos y actualizamos el DOM.

En el bloque catch, verificamos error.response.status === 404 para manejar el caso de error 404. Si es un error 404, registramos el error y lo volvemos a arrojar para que pueda ser capturado nuevamente más arriba en la pila de llamadas si es necesario.

Comments are closed.

es.davy.ai

¿Tienes una pregunta?

Incapaz de manejar el error 404 en axios con try y catch.

Answer

davy.ai