使用经纬度参数时点击 openweathermap api 后未收到任何数据

Question

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

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

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

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

我在浏览器和 postman 中尝试了上面的 URL，我两次都收到了正确的数据。

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

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://"。现在一切正常。

使用经纬度参数时点击 openweathermap api 后未收到任何数据

Not receiving any data after hitting openweathermap api while using lat and long params

javascript

reactjs

openweathermap