反应.Ok总是正确的，即使是故意使用错误的国家

Question

简单的问题，为什么是回应。好吧，总是正确的，我想练习抛出新的错误，但这是一个问题，我无法修复…似乎我可以点击按钮和工作的东西，但我想创建一个虚假的错误，看看如何去，请帮助:)

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');

Answer 1

这是因为response.ok的取值取决于响应状态码是否在200-299范围内。对于超出此范围的代码，它将为false。

您正在访问的端点设计不良从某种意义上说，即使提供了无效的国家，它也会响应HTTP 200状态码，但有效载荷包含实际的错误码……虽然大多数开发人员都希望发出错误代码。

换句话说，并不是您做错了什么:如果查询失败或无效，您应该期望从端点获得非2xx HTTP状态码，这是自然的。然而，所讨论的端点违反了这种期望，无论结果如何，它总是返回200。

因此，如果您想捕获错误，您需要解析响应体并检查它是否是一个对象，以及它是否包含status键。根据我的原始测试，似乎:

• 端点返回一个对象数组如果使用了有效的国家名称

• 终端返回一个对象如果使用了无效的国家名称，则匹配以下接口:

  {
  status: number;
  message: string;
  }
  

  例如:

  {
  "status": 404,
  "message": "Not Found"
  }
  

下面是一个概念验证示例:

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>

Answer 2

你误解了response.ok的含义。参考文献:

Response接口的ok只读属性包含一个布尔值说明响应是否成功(状态在范围内)

指的是HTTP状态码。这意味着即使您使用了错误的国家，服务器仍然可以正确响应。(很可能不返回任何内容或返回错误。