Chicos, pregunta simple, ¿por qué la respuesta.ok siempre es cierta? Quiero practicar lanzar un nuevo error, pero este es un problema que no puedo solucionar... Parece que puedo hacer clic en el botón y todo funciona, pero quiero crear una falsificación. error y ver cómo va eso por favor ayuda :)
const btn = document.querySelector('.btn-country'); const countriesContainer = document.querySelector('.countries'); const renderError = function (msg) { countriesContainer.insertAdjacentText('beforeend', msg); // countriesContainer.style.opacity = 1; }; const renderCountry = (data, className = '') => { const html = ` <article class="${className}"> <img class="country__img" src="${data.flags.png}" /> <div class="country__data"> <h3 class="country__name">${data.name}</h3> <h4 class="country__region">${data.region}</h4> <p class="country__row"><span>👫</span>${( +data.population / 1000000 ).toFixed(1)} M</p> <p class="country__row"><span>🗣️</span>${data.languages[0].name}</p> <p class="country__row"><span>💰</span>${data.currencies[0].name}</p> </div> </article> `; countriesContainer.insertAdjacentHTML('beforeend', html); // countriesContainer.style.opacity = 1; }; const getCountryData = function (country) { fetch(`https://restcountries.com/v2/name/${country}?fullText=true`) .then(response => { console.log(response); if (!response.ok) throw new Error(`AAAAAAA`); return response.json(); }) .then(data => { renderCountry(data[0]); //neigbour code // const neighbour = data[0].borders[0]; const neighbour = 'asdasd'; // if (!neighbour) return; return fetch(`https://restcountries.com/v2/alpha/${neighbour}`); }) .then(response => { console.log(response); return response.json(); }) .then(data => { console.log(data); renderCountry(data, 'neighbour'); }) .catch(err => { renderError(`${err.message}`); }) .finally(() => { countriesContainer.style.opacity = 1; }); }; btn.addEventListener('click', function () { getCountryData('portugal'); }); getCountryData('asdasd');Esto se debe a que el valor response.ok depende de si el código de estado de respuesta se encuentra dentro del rango de 200–299 . Será falso para códigos fuera de este rango.
El punto final al que está accediendo está mal diseñado en el sentido de que incluso cuando se proporciona un país no válido, responde con un código de estado HTTP 200 pero la carga contiene el código de error real... mientras que la mayoría de los desarrolladores esperarían que se emitiera un código de error.
En otras palabras, en realidad no está haciendo algo mal: es natural esperar que si una consulta falla o no es válida, debe esperar un código de estado HTTP que no sea 2xx desde un punto final. Sin embargo, el punto final en cuestión viola esa expectativa y siempre devuelve 200 independientemente del resultado.
Por lo tanto, si desea detectar el error, deberá analizar el cuerpo de la respuesta y verificar si es un objeto y si contiene la clave de status . Según mis pruebas primitivas, parece que:
El punto final devuelve una matriz de objetos si se usa un nombre de país válido
El punto final devuelve un objeto que coincide con la siguiente interfaz, si se usa un nombre de país no válido:
{ status: number; message: string; }Por ejemplo:
{ "status": 404, "message": "Not Found" }Un ejemplo de prueba de concepto a continuación:
function fetchCountry(country) { fetch(`https://restcountries.com/v2/name/${country}?fullText=true`) .then(response => { if (!response.ok) throw new Error(`AAAAAAA`); return response.json(); }) .then(data => { console.log(data); if (data && 'status' in data) { throw new Error(data.message); } }) .catch(e => { console.error(e); }); } document.querySelector('#valid-country').addEventListener('click', () => fetchCountry('US')); document.querySelector('#invalid-country').addEventListener('click', () => fetchCountry('FooBar')); <button type="button" id="valid-country">Fetch using valid country name (US)</button> <button type="button" id="invalid-country">Fetch using invalid country name (FooBar)</button>Has entendido mal lo que significa response.ok . De la referencia :
La propiedad de solo lectura ok de la interfaz Response contiene un booleano que indica si la respuesta fue exitosa (estado en el rango 200-299) o no.
Eso se refiere al código de estado HTTP. Lo que implica que incluso cuando usa el país equivocado, el servidor sigue respondiendo correctamente. (muy probablemente sin nada o con un error devuelto.