如何获取REST API主体信息(JSON)？

Question

我试图使用OpenWeather Rest API，但我在访问主体信息时遇到了问题。我正在使用Postman进行测试，它可以工作，但在我的代码中没有，所以我缺少了一些东西。

Postman的结果。(我没有显示整个主体内容，因为没有必要)REST端点与查询：api.openweathermap.orgdata2.5weather?q=London, uk&APPID=。api-key-here

{
"coord": {
    "lon": -0.13,
    "lat": 51.51
},
"weather": [
    {
        "id": 500,
        "main": "Rain"
    }
],
"main": {
    "temp": 290.38
},
"name": "London"
}

端点在Postman上工作正常。

我的代码。

import React, { useState, useEffect } from 'react';

在我的LocalWeather函数中

Variables:

const [weather, setWeather] = useState([]);

UseEffect来运行我的fetch调用

useEffect(() => {
    fetchData();
}, []); //  Run once on load

实际获取调用。

const fetchData = async () => {
    const res = await fetch(`api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=${api-key`);
    res.json()
    .then(res => setWeather(res))
}

然后我就可以登录出头文件（这给了我相关信息）。

console.log(res);

我之前不得不添加以下内容 因为useEffect的作用就像componentDidMount一样，在初始渲染后运行。

if (!weather.length) {
    return null;
}

然后，如果我按照邮递员的结果，我会尝试渲染信息。

return (
    <ul>
        <li>{weather.weather[0].main}</li>
    </ul>
);

我漏掉了什么明显的东西，导致我无法显示主体信息？

在控制台得到以下信息，这告诉我它实际上没有得到任何信息。未捕获（在承诺中）SyntaxError: Unexpected token < in JSON at position 0 (位置0)

Answer 1

问题似乎是 fetch 认为URL是相对的。由于您的URL没有以 https://, fetch 是相对于你当前所处的任何页面进行请求。例如：: http://localhost:3000/api.openweathermap.org/data/2.5/weather.

不管那个页面是什么（可能是404页面），它很可能不是JSON，所以当你做的时候，它无法解析它。res.json() 这就是为什么你得到JSON语法错误的原因。

如果你添加了 https:// 前缀，它应该可以工作

const fetchData = async () => {
  const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=${apiKey}`);
  res
    .json()
    .then(res => setWeather(res))
}

Answer 2

补充一下Noah的答案，如果你只需要天气数组，你可以像这样在useEffects中设置Weather(res.weather)。

const fetchData = async () => {
  const res = await fetch(`https://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=${apiKey}`);
  res
    .json()
    .then(res => setWeather(res.weather))
}

这样一来，你就可以避免这里的if检查。

if (!weather.length) {
    return null;
}

Answer 3

所以有人在Slack频道帮我解决了这个问题.

<li>{openWeather.weather && openWeather.weather[0].main}</li>

我觉得这是个bug 但它确实从REST API中输出了响应。

我仍然得到一个警告，我不知道为什么。

    const axiosGet = () => {
        const data = axios.get(`https://api.openweathermap.org/data/2.5/weather?q=London,uk&APPID=api-key`)
        .then(data => setWeather(data.data));
    }

它说 Line 14:15: 'data' is assigned a value but never used no-unused-vars虽然一切都能正常工作，但我不是将 rest 端点设置为数据，然后在运行 setWeather 方法时使用吗？我不是将休息端点设置为数据，然后在运行setWeather方法时使用它吗？