Question

因此，我试图使用axios与HTML5Geolocation一起拉起一个api。

我将其放置在componentDidMount中，并期望它至少在控制台上运行。使用async记录结果，最后将州设置为国家/地区。

componentDidMount(){
    async onLoad() {
        if (window.navigator.geolocation) {
           window.navigator.geolocation.getCurrentPosition(
           position => {
              const response = axios.get('http://ws.geonames.org/countryCode' , {
                   lat: position.coords.latitude,
                   lng: position.coords.longitude,
                   type: 'JSON'
               });
               console.log('here is the response >>>>', response.countryName); 
               this.setState({ country: response.countryName })
           });

           }
         }

}

但是，这目前不起作用。我正在为我的API使用Geonames

知道我的代码在做什么错吗？

Answer 1

如@Shridhar Sharma所述，删除onLoad。

您在代码中缺少await。没有它的await表达式，异步函数的执行将不会等待Promise解析。

还有一点要记住，即使浏览器支持地理位置，也可能会出现其他错误，例如PERMISSION_DENIED，POSITION_UNAVAILABLE和TIMEOUT。查看更多

https://developer.mozilla.org/en-US/docs/Web/API/PositionError/code

componentDidMount() {
        if (window.navigator.geolocation) {
            window.navigator.geolocation.getCurrentPosition( async (position) => {
                const response = await axios.get("http://ws.geonames.org/countryCode", {
                    lat: position.coords.latitude,
                    lng: position.coords.longitude,
                    type: "JSON"
                });
                console.log("here is the response >>>>", response.countryName);
                this.setState({ country: response.countryName });

            }, (e) => {
                // other errors appear here
                console.log(e);
            });
        } else {
            console.log("navigator not supported");
        }
    }

Answer 2

您正在声明onLoad方法，但未调用它，请删除该声明并直接调用代码，因为在componentDidMount中声明一个方法没有意义

componentDidMount() {
  if (window.navigator.geolocation) {
    window.navigator.geolocation.getCurrentPosition(
      position => {
        const response = axios.get('http://ws.geonames.org/countryCode', {
          lat: position.coords.latitude,
          lng: position.coords.longitude,
          type: 'JSON'
        });
        console.log('here is the response >>>>', response.countryName);
        this.setState({
          country: response.countryName
        })
      });
  }
}

我如何在React的componentDidMount中调用geoLocation

2 个答案: