原生JS调用纽约时报API时如何跳过null属性避免TypeError报错

解决方案 #

方案1：保留无图文章，用占位图兜底 #

直接在提取图片URL的位置添加可选链判断+空值合并兜底，ES2020及以上原生JS支持，代码修改量最小：

// 原错误代码
// const url = `${article.multimedia[0].url}`;
// 修改后
const url = article.multimedia?.[0]?.url ?? '你的本地默认占位图路径';

完整修改后的函数如下：

function renderSingleArticle(article) {
  const url = article.multimedia?.[0]?.url ?? '你的本地默认占位图路径';

  return `
  <div class="column-third">
    <div class="article-card">
      <h2 class="news-title">${article.title}</h2>
      <img src="${url}" alt="CurrentNews">
      <div class="article-card-text">
        <p class="abstract">${article.abstract}</p>
        <a href="${article.short_url}" target="_blank">Click here to read more...</a>
      </div>
    </div>
  </div>
`;
}

?.可选链运算符会在前置属性为null/undefined时直接返回undefined，不会继续读取后续属性触发报错；??空值合并运算符会在左侧值为null/undefined时自动使用右侧的兜底值。

方案2：直接过滤掉无图文章，不渲染 #

如果业务要求只展示带图的报道，可以在调用渲染函数前先对接口返回的文章数组做过滤：

// articleList为接口返回的完整文章数组
const validArticles = articleList.filter(article => {
  // 只保留multimedia为数组且长度大于0的文章
  return Array.isArray(article.multimedia) && article.multimedia.length > 0
});
// 后续仅用validArticles数组渲染即可

低版本浏览器兼容写法 #

如果需要兼容不支持ES2020新语法的老浏览器，可以用传统的逻辑与判断替代可选链：

const url = (article.multimedia && article.multimedia[0] && article.multimedia[0].url) || '你的本地默认占位图路径';

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