如何获取 REST API 正文信息(JSON)?

Question

我正在尝试使用 OpenWeather Rest API，但我在访问正文信息时遇到问题。我正在使用 Postman 进行测试，这有效，但不在我的代码中，所以我错过了一些东西。

邮递员结果：(我不显示整个正文内容，因为它不是必需的(带有查询的REST端点：api.openweathermap.org/data/2.5/weather?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"
}

端点在邮递员上工作正常。

我的代码：

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

在我的本地天气函数中：

变量：

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

使用效果来运行我的获取调用

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的行为类似于组件DidMount并在初始渲染后运行。

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

然后，如果我遵循邮递员结果，我会尝试呈现信息：

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

我错过了什么明显的东西阻止我显示身体信息？

在控制台上获取以下内容，这告诉我它实际上并没有获取任何信息。未捕获(承诺中(语法错误：JSON 中位置 0 处出现意外的令牌<</em>

Answer 1

问题似乎是fetch认为 URL 是相对的。由于您没有以https://为前缀的 URL，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

为了补充诺亚的答案，如果你只需要天气数组，你可以像这样在useEffects中设置天气(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频道上的某个人为我想通了这个问题。

返回 JSX 时：

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

这对我来说感觉像是一个错误，但它确实输出了 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，尽管一切正常。我不是将其余终结点设置为数据，然后在运行 setWeather 方法时使用它吗？