为何第二次fetch的catch不生效？Promise链式调用问题排查

你的问题大概率是链式调用逻辑漏洞和错误处理不完整共同导致的，下面是具体排查点和修正方案：

常见链式调用错误点 #

• 未正确提取邻国代码：restcountries v2 API中，国家详情的邻国字段是borders（字符串数组，存储邻国的alpha3代码），如果误取其他字段（比如旧版本的neighbors），或者没处理/name接口返回的数组结构（需取第一个元素），会导致无邻国数据可用。
• 邻国请求路径错误：获取邻国需用alpha3代码调用/v2/alpha/{code}接口，若误用/name/{code}，会因代码不是国家全名而返回404。
• 未正确处理批量请求：多个邻国请求需用Promise.all()包裹并返回给链式调用，若直接循环调用fetch但未收集Promise，链式会跳过邻国请求直接执行后续代码。
• 忽略API响应状态：fetch仅在网络故障时reject，HTTP 404/500等错误不会自动触发reject，若没手动判断response.ok，会把错误响应当成有效数据处理，导致后续逻辑崩溃。

常见错误处理漏洞 #

• 未覆盖全场景错误：未区分「主国家不存在」「单个邻国不存在」「无邻国」三种场景，错误提示逻辑混乱。
• 未捕获链式中间错误：若主国家请求或单个邻国请求出错，未在对应环节捕获错误，会导致整个链式中断且无明确提示。
• 无邻国时仍发起请求：当borders为空数组时，仍执行邻国请求逻辑，会触发不必要的错误。

排查与修正步骤 #

1. 单独验证主国家请求：
   执行以下代码，确认返回数据中borders字段存在且有值：

   fetch('https://restcountries.com/v2/name/portugal?fullText=true')
     .then(res => res.json())
     .then(data => console.log(data[0].borders)); // 应输出 ["ESP"]
   

2. 单独验证邻国请求：
   用主国家返回的alpha3代码测试，确认接口可用：

   fetch('https://restcountries.com/v2/alpha/ESP')
     .then(res => res.json())
     .then(data => console.log(data.name)); // 应输出 "Spain"
   

3. 修正链式调用与错误处理：
   参考以下完整代码，覆盖所有场景：

   function getCountryAndNeighbors(countryName) {
     // 1. 获取主国家数据
     fetch(`https://restcountries.com/v2/name/${countryName}?fullText=true`)
       .then(response => {
         if (!response.ok) throw new Error('Country not found');
         return response.json();
       })
       .then(countryData => {
         const targetCountry = countryData[0];
         console.log('当前国家:', targetCountry.name);
   
         const neighborCodes = targetCountry.borders;
         // 无邻国场景处理
         if (!neighborCodes || neighborCodes.length === 0) {
           console.log('No neighbors for this country');
           return;
         }
   
         // 2. 批量请求邻国，单个请求错误不影响全局
         const neighborRequests = neighborCodes.map(code => 
           fetch(`https://restcountries.com/v2/alpha/${code}`)
             .then(res => {
               if (!res.ok) return Promise.reject(`邻国 ${code} 不存在`);
               return res.json();
             })
             .catch(err => {
               console.log(err);
               return null;
             })
         );
   
         return Promise.all(neighborRequests);
       })
       .then(neighbors => {
         if (neighbors) {
           const validNeighbors = neighbors.filter(n => n !== null);
           console.log('邻国列表:', validNeighbors.map(n => n.name));
         }
       })
       .catch(err => console.log(err.message));
   }
   
   // 测试葡萄牙
   getCountryAndNeighbors('portugal');
   

4. 关键逻辑说明：

   • 用fullText=true确保/name接口返回精确匹配的单个国家，避免数组处理错误。
   • 每个fetch后判断response.ok，手动抛出HTTP错误，确保错误能被捕获。
   • 邻国请求用Promise.all()批量处理，单个邻国失败时用catch捕获并返回null，不影响其他邻国结果。
   • 提前判断borders是否为空，直接触发无邻国提示，避免无效请求。

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