在使用纬度和长参数时点击 openweathermap API 后未收到任何数据

Question

我想尝试OpenWeatherMap API。所以我创建了一个反应应用程序，在其中我尝试了以下 URL 来获取天气数据

api.openweathermap.org/data/2.5/forecast?APPID={APPID}&id=524901&q=Mumbai

它没有任何问题，但是当我尝试使用纬度和经度参数时，它不起作用。此外，它不会引发任何错误。以下网址用于纬度和经度

api.openweathermap.org/data/2.5/forecast?APPID={APPID}&lat=19.19&lon=72.95

我在浏览器和邮递员中尝试了上述URL，两次都收到了适当的数据。

这是我在componentDidMount()中编写的 react 代码：

import './css/main.css';
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
lat: 19.196735,
long: 72.95785599999999
}
}
componentDidMount() {
this.setCityName();
let url = 'api.openweathermap.org/data/2.5/forecast?lat=' + this.state.lat + '&lon=' + this.state.long + '&appid={APPID}';
console.log(url)
fetch(url)
.then(res => res.json())
.then(
(result) => {
console.log(result)
this.setState({
isLoaded: true,
list: result.list[0],
city: result.city.name,
country: result.city.country
});
},
(error) => {
this.setState({
isLoaded: false,
error: error
});
}
)
}
setCityName() {
let success = (position) => {
let lat = position.coords.latitude;
let long = position.coords.longitude;
this.setState({
lat,
long
})
}
let error = () => {
console.log('Can not find your location. Setting default location to Mumbai!');
}
if (!navigator.geolocation) {
console.log('Geolocation is not supported in your browser. Setting default location to Mumbai!');
}
else {
navigator.geolocation.getCurrentPosition(success, error);
}
}
render() {
console.log(this.state.list)
return (
<div className="app-container">
<span className="location"><i className="fa fa-map-marker-alt"></i>{this.state.city}, {this.state.country}</span>
{/* <div>{this.state.list}</div>ire */}
</div>
)
}
}
export default App;

Answer 1

我犯了一个愚蠢的错误。我在获取 URL 时没有使用"https://"。现在它工作正常。