Nextjs 的两个错误：res.json 不是函数并且 getserversideprops 没有返回对象

问题描述

我正在尝试发出 api 请求，但我确实获得了数据，因为我尝试在控制台记录它并显示在控制台上，但我仍然收到错误消息。以下是错误：

TypeError: res.json is not a function

Error: Your `getServerSideProps` function did not return an object. Did you forget to add a `return`?
    

这是我的代码：

export async function getServerSideProps(context) {
  // API KEYS
  const apiKeyLocationIQ = process.env.API_KEY_LOCATIONIQ;
  const apiKeyWeather = process.env.API_KEY_WEATHER;
  // API REQUEST OPTIONS
  let cityLocationIQ = context.params.location;
  let urlLocationIQ = "https://api.locationiq.com/v1/search.PHP?format=JSON&key="+apiKeyLocationIQ+"&q="+cityLocationIQ+"&limit=1";
  // API REQUEST FOR LAT AND LON
  try{
    const res = await axios.get(urlLocationIQ).then((resLocation)=>{
      return resLocation
    })
    const weather = await res.json();
    return {
      props: {
        weather
      }
    }
  }catch (error){
    console.log( error);
  }
  
}

更新 我对 axios 请求进行了一些更改，但出现了不同的错误。这次它说：

function cannot be serialized as JSON. Please only return JSON serializable data types.

这是我更新的 axios 请求的样子：

try{
    const res = await axios.get(urlLocationIQ,{responseType: 'json'})
    const weather = await res;
    return {
      props: {
        weather
      }
    }
  }catch (error){
    console.log( error);
    throw error;
  }

最终更新 所以事实证明，我发送的 axios 请求返回了包括标头等在内的整个请求数据，而我需要的数据是响应最底部的一个对象，所以我所要做的就是指定我的数据需要。 这是我的代码：

const location = await axios.get(urlLocationIQ).then((resLocation)=>{
      return {resLocation.data[0]}
    })

在那之后，代码现在可以完美运行了。

解决方法

据我所知，axios.get() 解析的值没有 .json() 方法，因此会出现错误。

您可以提前告诉 Axios，您希望它自动为您解析 JSON 响应。

const weather = (await axios.get(urlLocationIQ,{responseType: 'json'})).data;

但是，该 responseType 是默认值，因此您实际上可以这样做，假设您的响应实际上返回 JSON：

const weather = (await axios.get(urlLocationIQ)).data;

我假设您可能期望使用 .json() 接口使用的 fetch() 方法，但这不是 axios 所必需的。默认情况下，axios 会为您读取响应正文，而 fetch() 接口不会读取响应正文（标题除外），直到您专门调用 .json() 等方法。但是，这不是 axios 的工作方式。在这方面，axios 通常需要更少的代码行来发出请求并获得响应。

---

附言请注意此处的 .then()：

.then((resLocation)=>{
  return resLocation
})

毫无意义。承诺已经解析为该值，因此添加一个 .then() 只是再次返回它是没有用的。

---

另外，请注意 getServerSideProps() 是一个 async 函数。这意味着它始终返回一个承诺，并且该承诺的解析值将是您在函数内部 return 的任何值。该函数的调用者需要使用 await 或 .then() 来获取解析值。

---

而且，在您的 catch() 中，您需要重新抛出错误，以便调用者得到错误。否则，您只会吃掉错误并使用 undefined 解决承诺，因为将没有返回值。

} catch (error) {
    console.log( error);
    throw error;
}