After chaining the POST and GET calls in my code, I noticed a slight slowdown and was curious if this is normal or if there's a more efficient approach. The delay in displaying the google map marker made me think that pushing the newly created marker into the markers array at the end of the chained POST and GET might be causing the issue.
Initially, this is how my code looked:
createMarker(event){
axios.post('/marker', {
userId: this.$store.state.auth.userId,
marker: event.latLng
}).then(response => {
this.markers.push({ 'id': response.data.marker.id,
'lat': response.data.marker.lat,
'lng': response.data.marker.lng})
}).catch((error) => console.log(error));
}
The updated version chains a POST request within the GET .then() block like this:
createMarker(event){
var lat = event.latLng.lat();
var lng = event.latLng.lng();
const latLng = 'https://maps.googleapis.com/maps/api/geocode/json?latlng=' + lat + ',' + lng + '&key='
axios.get(latLng)
.then(response => {
const name = response.data.results[0].address_components[5].long_name + ', '
+ response.data.results[0].address_components[3].long_name
console.log(response)
axios.post('/marker', {
userId: this.$store.state.auth.userId,
marker: event.latLng,
name: name
}).then(response => {
this.markers.push({ 'id': response.data.marker.id,
'lat': response.data.marker.lat,
'lng': response.data.marker.lng})
}).catch((error) => console.log(error));
}).catch((error) => console.log(error))
}
I need to chain the methods because I'm using Google's geocode API to retrieve the city name based on latitude and longitude, and then pass it to my POST request for saving it to my own database.