Promise is returning promise itself

Question

I am calling a function getCoordinates() that I am trying to have return the actual data itself and not the promise. So for example if I console log coordinates after I call getCoordinates() I get the following...

Promise {<pending>}
__proto__: Promise
[[PromiseStatus]]: "resolved"
[[PromiseValue]]: Object
lat: 32.8866234
lng: -97.1008832
__proto__: Object

However, I just want to get the lat and lng properties from getCoordinates()

getCoordinates()

const getCoordinates = (address) => {
  const convertedAddress = address.address.replace(/ /g, '+')
  return axios.get(`https://maps.googleapis.com/maps/api/geocode/json?address=
  ${convertedAddress}&key=youwerelikeabrothertomeannie`)
    .then(res => { return res.data.results[0].geometry.location })
}

I want to pass the coordinates I get into the RegularMap component

Component being rendered

function Map ({...props}) {
  const coordinates = getCoordinates(props)
  console.log(coordinates)
  return (
    <RegularMap
      googleMapURL='https://maps.googleapis.com/maps/api/js?key=jedimaster
      loadingElement={<div style={{height: '100%'}} />}
      containerElement={<div style={{height: '280px'}} />}
      coordinates={coordinates}
      mapElement={<div style={{height: '100%'}} />}
    />

  )
}

*"I am trying to have return the actual data itself and not the promise."* Then you haven't understood how promises work. To get the data of a promise, you use `.then`: `getCoordinates().then(coords => console.log(coords.lat);)`. Anything that needs to access the data of a promise needs to be inside or called from the `then` callback. — Felix Kling, Nov 07 '18 at 19:27
Sigh that makes sense. Thanks for quoting me. Let me write it up and if you want to make that an answer so I can mark it? — Snoopy, Nov 07 '18 at 19:28
The canonical Q&A for all async stuff is https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call . Do you think you would have figured out the issue after looking at that? If yes, this should be closed as duplicate. — Felix Kling, Nov 07 '18 at 19:33

score 0 · Answer 1 · answered Nov 07 '18 at 20:00

Make your getCoordinates function return a promise.

const getCoordinates = (address) => {
  const convertedAddress = address.address.replace(/ /g, '+')
  return axios.get(`https://maps.googleapis.com/maps/api/geocode/json?address=
  ${convertedAddress}&key=youwerelikeabrothertomeannie`)
}

Then you can use it like this:

getCoordinates('somethinghere')
    .then(resp => {
        //probably set state here
    }).catch(err => {
        // probably console log error here
    })

score 0 · Answer 2 · answered Nov 07 '18 at 20:34

These are situations where I love using async/await for promises.

If you have access to ES7, simply adding those 2 words would fix this problem:

async function Map ({...props}) {
  const coordinates = await getCoordinates(props)
  console.log(coordinates)
  return (
    <RegularMap
      googleMapURL='https://maps.googleapis.com/maps/api/js?key=jedimaster
      loadingElement={<div style={{height: '100%'}} />}
      containerElement={<div style={{height: '280px'}} />}
      coordinates={coordinates}
      mapElement={<div style={{height: '100%'}} />}
    />
  )
}

Promise is returning promise itself

2 Answers2