Next.js中fetch请求返回undefined的原因及解决方法

一、fetch返回undefined的原因及解决 #

你当前的getServerSideProps代码里，await fetch(...).then(() => console.log(...))存在问题——.then()的回调函数没有返回任何值，导致整个await的结果变成undefined，所以res变量自然是undefined。

解决方法： #

方法1：移除多余的.then()，用await链式处理

export async function getServerSideProps({ query: { className } }) {
  const res = await fetch(`http://localhost:3000/api/admin/classes/${className}`);
  console.log(`first get request sent: `);
  
  const { data } = await res.json();
  console.log(data);

  return { props: { classDetail: data } };
}

方法2：若要保留.then()，需在回调里返回response对象

export async function getServerSideProps({ query: { className } }) {
  const res = await fetch(`http://localhost:3000/api/admin/classes/${className}`)
    .then(res => {
      console.log(`first get request sent: `);
      return res; // 必须返回response，否则res会是undefined
    });

  const { data } = await res.json();
  console.log(data);

  return { props: { classDetail: data } };
}

二、多接口调用的变量冲突问题 #

你在解构两个接口的返回值时，重复使用const {data}声明变量，而const声明的变量在同一作用域内不允许重复定义，因此报错。

解决方法：解构时重命名变量，或使用不同变量名 #

方式1：解构重命名

export async function getServerSideProps({ query: { className } }) {
  const res = await fetch(`http://localhost:3000/api/admin/classes/${className}`);
  // 将data重命名为classData
  const { data: classData } = await res.json();

  const res2 = await fetch(`http://localhost:3000/api/admin/classes/${className}/subjects`);
  // 将data重命名为subjectsData
  const { data: subjectsData } = await res2.json();

  return { props: { classDetail: classData, subjects: subjectsData } };
}

方式2：使用独立变量名

export async function getServerSideProps({ query: { className } }) {
  const classRes = await fetch(`http://localhost:3000/api/admin/classes/${className}`);
  const classResponse = await classRes.json();

  const subjectsRes = await fetch(`http://localhost:3000/api/admin/classes/${className}/subjects`);
  const subjectsResponse = await subjectsRes.json();

  return { props: { classDetail: classResponse.data, subjects: subjectsResponse.data } };
}

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