Next.js中如何展示API的所有成功与失败请求结果

第一步：改造getServerSideProps逻辑 #

现有代码的核心问题是axios.all批量请求时，只要有一个角色查询失败触发404，整个请求队列就会直接抛出异常终止，同时返回的结果没有和输入的角色名绑定，无法对应展示每个输入的查询状态。改造逻辑如下：

• 给每个单独的角色查询请求添加异常捕获，避免单个查询失败影响其余请求
• 每个请求的返回结果绑定对应的输入角色名，方便后续对应展示
• 拆分查询成功的结果列表、未查询到结果的角色列表，一同传给页面组件

改造后的代码如下：

export const getServerSideProps: GetServerSideProps = async (context) => {
  const { name } = context.query;
  // 拆分角色名同时去除输入的前后空格，避免空格导致查询失败
  const nameArray = (name as string).split(',').map(item => item.trim());

  const allRequest = nameArray.map((inputName) => 
    axios.get(`https://rickandmortyapi.com/api/character/?name=${inputName}`)
      .then(res => ({
        inputName,
        success: true,
        data: res.data.results
      }))
      .catch(() => ({
        inputName,
        success: false,
        data: null
      }))
  );

  const requestResults = await Promise.all(allRequest);
  // 拆分成功、失败列表
  const successList = requestResults.filter(item => item.success);
  const failedList = requestResults.filter(item => !item.success).map(item => item.inputName);

  return ({
    props: {
      successList,
      failedList,
    },
  });
};

第二步：页面组件渲染逻辑 #

拿到props返回的两个列表后，按照需求分别渲染即可，示例代码如下：

export default function CharacterPage({ successList, failedList }: {
  successList: Array<{ inputName: string, data: any[] }>,
  failedList: string[]
}) {
  return (
    <div>
      <h2>查询结果</h2>
      {successList.map(item => (
        <div key={item.inputName}>
          {/* 按需求格式展示输入内容和返回结果，可自行替换为自定义的字段渲染逻辑 */}
          {item.inputName} --- {JSON.stringify(item.data)}
        </div>
      ))}

      {failedList.length > 0 && (
        <>
          <h2>未查询到结果的角色</h2>
          <ul>
            {failedList.map(name => (
              <li key={name}>{name}</li>
            ))}
          </ul>
        </>
      )}
    </div>
  )
}

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