如何在componentDidMount中調用兩個異步方法？

Question

我在我的應用程序組件中有這兩個方法，我想使用getLocation來設置緯度和經度，然後我想調用getWeather方法。這兩個方法，我會像在componentDidMounth

getLocation: function() { 
    if(navigator.geolocation){ 
    navigator.geolocation.getCurrentPosition(  
     function(position){ 
     this.setState({ 
     location: position 
     }); 
    }.bind(this) 
); 
} 
} 

和

getWeather: function() { 
    let latitude =48.1568806; //just for test 
    let longitude =17.0739704; //just for test 
    $.ajax({ 
     url:`http://api.openweathermap.org/data/2.5/weather?lat=${latitude}&lon=${longitude}&APPID=${this.state.key}`, 
     dataType: 'json', 
     async: true, 
     cache: false, 
     success: function(data){ 
     this.setState({weather: data}) 
     }.bind(this), 
     error: function(e){ 
     console.log(e); 
    } 

    }); 
    }, 

打電話，但我需要等待的getLocation。

我該如何處理？

Answer 1

如果你需要的位置傳遞給getWeather，你可以做到這一點在getLocation()

componentDidMount: function() { 
    this.getLocation(); 
} 
getLocation: function() { 
    if(navigator.geolocation){ 
    navigator.geolocation.getCurrentPosition(  
     function(position){ 
     this.setState({ 
     location: position 
     }); 
     // Add call here, change getWeather to take a location object 
     this.getWeather(location); 

    }.bind(this) 
); 
} 
} 

A的回調mored脫鉤的解決辦法是使用承諾

componentDidMount: function() { 
    this.getLocation().done(location=>{ 
     this.getWeather(location); 
    }); 
}, 
getLocation: function() { 
    return new Promise((resolve, reject)=>{ 
    if(navigator.geolocation){ 
     navigator.geolocation.getCurrentPosition(function(position){ 
     this.setState({location: position}); 
     resolve(location);  
     }.bind(this)) 
    } else { 
     reject(); 
    } 
    }); 
} 
}