JavaScript如何将Fetch请求错误信息展示到页面UI的data div中

核心修改逻辑 #

你当前代码的问题是.catch()回调仅调用console.error把错误输出到浏览器控制台，没有操作DOM将错误信息插入到指定的data容器中，同时原代码还存在返回值判断逻辑写反的bug，会导致正常请求返回的数组数据无法正确渲染。
需要做的调整如下：

• 提前获取页面上用于展示内容的data容器DOM节点，避免后续重复查询
• 重写catch回调逻辑，在保留控制台错误打印方便调试的基础上，创建错误提示DOM节点插入到data容器中
• 修正原代码中数组判断的分支逻辑：目标接口返回的photos数据本身就是数组类型，原分支判断条件写反
• 区分HTTP状态错误、网络错误、数据格式错误三类异常，给用户展示可读的错误提示，不要直接抛出原始错误对象

修改后可直接运行的完整代码 #

// 获取页面上的data展示容器，如果你已经在其他地方定义过该变量可跳过这行
const dataContainer = document.getElementById('data');
// 发起请求前清空容器旧内容
dataContainer.innerHTML = '';

fetch('https://jsonplaceholder.typicode.com/photos')
  .then((res) => {
    if (!res.ok) {
      // 把4xx/5xx的HTTP错误转为可捕获的异常，携带状态码信息
      throw new Error(`服务端响应异常，状态码：${res.status}`);
    }
    return res.json();
  })
  .then((result) => {
    // 修正原代码的数组判断逻辑，接口正常返回值为数组
    if (Array.isArray(result)) {
      result.forEach((item) => {
        // 按你的业务需求渲染列表项，示例为创建p标签展示图片标题
        const itemNode = document.createElement('p');
        itemNode.textContent = item.title;
        dataContainer.append(itemNode);
      });
    } else {
      throw new Error('返回数据格式异常，请稍后重试');
    }
  })
  .catch((err) => {
    // 保留控制台打印方便调试
    console.error(err);
    // 创建错误提示节点
    const errorNode = document.createElement('div');
    // 基础错误样式，可根据自己的UI规范调整
    errorNode.style.cssText = 'color:#ff4d4f;padding:12px;border:1px solid #ffccc7;border-radius:4px;margin:8px 0;';
    errorNode.textContent = `加载失败：${err.message || '网络连接异常，请检查网络后重试'}`;
    // 将错误节点插入到页面容器中
    dataContainer.append(errorNode);
  });

注意事项 #

• 如果你的代码里已经获取过data容器的DOM引用，直接替换成你自己的变量名即可，不需要重复查询
• 原代码中提到的results.append逻辑如果是对应其他独立容器，保留原有逻辑即可，不影响错误展示功能
• 错误提示的样式可以根据页面设计规范自行修改，核心是保证错误提示醒目，用户能第一时间感知到加载失败
• 不要直接把完整错误对象插入到页面中，要提取可读的错误信息，避免向用户展示无意义的技术字段

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