javascript - 未找到 : true not redirecting to 404 page on failed axios request

Question

我正在使用 Axios 访问一个简单的 API。如果请求因 404 错误而失败，我想将用户重定向到内置的 Next.js 404 页面。如果请求状态为 404，我将 notFound bool 值设置为 true。我正在使用的 jsonplaceholder.typicode.com 用户 API 上有 10 个用户.如果我访问前 10 个用户，请求返回 200 并且我的页面按预期呈现。例如，如果我访问 https://jsonplaceholder.typicode.com/users/11，我会得到未处理的错误页面，而不是内置的 404 页面。

import Link from 'next/link';
import axios from 'axios';

export async function getServerSideProps(ctx) {
  const { id } = ctx.query;
  const userReq = await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`);
  if (userReq.status === 404) {
    return {
      notFound: true,
    };
  }
  return {
    props: {
      user: userReq.data,
    },
  };
}

function UserPage({ user }) {
  return (
   <div>
     <div>
       <Link href="/" passHref>
        Back to home
       </Link>
     </div>
     <hr />
     <div style={{ display: 'flex' }}>
      <div>
       <div>
         <b>Username:</b> {user.username}
       </div>
       <div>
         <b>Full name:</b>
         {user.name}
       </div>
       <div>
         <b>Email:</b> {user.email}
       </div>
       <div>
         <b>Company:</b> {user.company.name}
       </div>
       <div>
         <b>Phone:</b> {user.phone}
       </div>
      </div>
    </div>
  </div>
 );
}

export default UserPage;

但是我没有得到内置的 Next.js 404 页面，而是得到了一个未处理的错误:

不确定我在这里做错了什么。感谢您的帮助。

Answer 1

返回非 2xx 响应的 Axios 请求将抛出错误。失败的请求在 getServerSideProps 有机会返回并显示 404 页面之前抛出错误。

您必须在 axios 调用周围添加一个 try/catch 并从 catch block 返回 404 页面。

export async function getServerSideProps(ctx) {
    const { id } = ctx.query;

    try {
        const userReq = await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`);

        return {
            props: {
                user: userReq.data
            }
        };
    } catch(err) {
        console.error(err);

        return { 
            notFound: true 
        };
    }
}