JavaScript不使用async await正确调用两级REST API的fetch及axios实现方法

原有代码不符合规范的核心问题 #

• 依赖全局变量存储请求结果，存在作用域污染风险，变量冲突概率高
• 硬编码判断请求完成数量，当第一个接口返回的文章数量变化时逻辑直接失效，容错性极低
• 遍历过程中仅发起请求未返回Promise实例，无法统一管控并行请求的完成状态
• 缺少异常捕获逻辑：原生fetch只有网络错误才会触发catch，4xx/5xx响应不会被捕获；单个图片请求失败会导致整个流程中断
• axios场景下用axios.all包裹单个请求属于冗余写法，无实际意义

规范Axios实现（不使用async/await） #

// 直接发起第一个接口请求即可，无需用axios.all包裹单个请求
axios.get(`${urlRestApi}`)
  .then(response1 => {
    // 处理接口返回生成标准化文章数组
    const arrPost = response1.data.map(res => ({
      titulo: res.title.rendered,
      contenido: res.content.rendered,
      extracto: res.excerpt.rendered,
      idImagen: res.featured_media,
    }));
    console.log("AQUI", arrPost);
    
    // 生成所有图片请求的Promise数组，每个请求单独捕获异常避免单个失败影响整体
    const imageRequestList = arrPost.map(image => 
      axios.get(`${urlImage}/${image.idImagen}`)
        .then(urls => urls.data)
        .catch(err => {
          console.error(`图片ID${image.idImagen}请求失败:`, err);
          // 可自定义返回默认图片数据兜底
          return { source_url: '默认图片地址' };
        })
    );
    
    // 统一等待所有图片请求完成后再处理数据
    return Promise.all(imageRequestList).then(arrUrl => {
      const arrImage = arrUrl.map(img => ({
        imagenes: img.source_url,
      }));
      console.log("TEST", arrImage);
      mostrarHTML(arrImage, arrPost);
    });
  })
  .catch(err => {
    console.error('文章接口请求失败:', err);
  });

规范Fetch实现（不使用async/await） #

fetch(`${urlRestApi}`)
  .then(respuesta => {
    // 手动处理fetch的响应状态，4xx/5xx不会自动触发catch
    if (!respuesta.ok) throw new Error(`文章接口请求错误: ${respuesta.status}`);
    return respuesta.json();
  })
  .then(data => {
    const arrPost = data.map(item => ({
      titulo: item.title.rendered,
      contenido: item.content.rendered,
      extracto: item.excerpt.rendered,
      idImagen: item.featured_media,
    }));
    console.log(arrPost);
    
    // 生成所有图片请求的Promise数组
    const imageRequestList = arrPost.map(image => 
      fetch(`${urlImage}/${image.idImagen}`)
        .then(res => {
          if (!res.ok) throw new Error(`图片ID${image.idImagen}请求错误: ${res.status}`);
          return res.json();
        })
        .catch(err => {
          console.error(err);
          // 可自定义返回默认图片数据兜底
          return { source_url: '默认图片地址' };
        })
    );
    
    // 统一等待所有图片请求完成后再处理数据
    return Promise.all(imageRequestList).then(arrUrl => {
      const arrImage = arrUrl.map(img => ({
        imagenes: img.source_url,
      }));
      console.log("aqui", arrImage);
      mostrarHTML(arrImage, arrPost);
    });
  })
  .catch(error => {
    console.log('全局错误捕获:', error);
  });

内容的提问来源于stack exchange，提问作者Francisco Sanvicente Pico