React应用请求restcountries接口时fetch无响应报错如何解决

• 你当前调用的restcountries v2版本接口已正式废弃下线，无法正常返回响应数据，该接口官方目前已迭代至v3.1版本
• 现有fetch代码未添加异常捕获逻辑，请求失败时会直接抛出未捕获的运行时错误，不会触发你写的失败提示，表现为无响应
• fetch本身仅在网络层请求失败时触发reject，若接口返回404、500等非2xx状态码，依然会进入.then回调，此时直接调用r.json()会触发数据解析错误

修正后完整代码 #

useEffect(() => {
  // 替换为官方可用的v3.1版本接口
  fetch(`https://restcountries.com/v3.1/all`)
    .then((r) => {
      // 先校验响应状态是否正常
      if (!r.ok) {
        throw new Error('接口响应异常')
      }
      return r.json()
    })
    .then((data) => {
      if (Array.isArray(data) && data.length) {
        setCountries(data);
      } else {
        alert('无法加载数据');
      }
    })
    // 新增catch块捕获所有请求、解析阶段的错误
    .catch(err => {
      console.error('拉取国家数据失败：', err)
      alert('拉取数据失败，请稍后重试')
    })
}, []);

补充注意事项 #

• 若替换接口后仍存在跨域问题，可在开发环境配置代理：在项目package.json文件中新增"proxy": "https://restcountries.com"配置项，后续请求时直接写fetch('/v3.1/all')即可规避开发环境跨域限制
• v3版本接口返回字段结构和v2存在差异，需要根据你的业务需求调整后续字段取值逻辑，例如v2版本的国家名称字段name在v3版本中对应name.common

内容的提问来源于stack exchange，提问作者miouri