Why will async/await Axios request not return Data instead of a promise object

Question

I'm aware there's lots of similar questions but all the answers say use an async function with an await function call inside...which I'm already doing. After hours of banging my head off this, I need to ask the question...Feel free to down vote if you feel you have to, but I HAVE looked for an answer.

So I'm a little puzzled and could do with an extra set eyes on this. I'm using Axios to return data from an API call. I've got an async function sending the request with and await on the axios.get function request. So to my mind it should return data not a promise. However it's returning a promise and nothing that I've tried will return the data. I can console log this and it spits out the data, but the actual return is a promise object. If anyone could tell me what's wrong here I'd be grateful.

import axios from "axios";
import { LatLngTuple } from "leaflet";

const primaryKey = '#################################################';
const getGeoData = (apiUrl: string) => (
    axios.get(apiUrl, {
        timeout: 5000,
        headers: {
            "Content-Type": "application/json",
        },
    })
);

async function geoLocate(longAddress, country){
    let geocodeUrlTemplate = 'https://atlas.microsoft.com/search/address/json?api-version=1.0&subscription-key={Azure-Maps-Primary-Subscription-key}&query={longAddress}countrySet={country}&view=Auto';
    let geoRequestUrl = geocodeUrlTemplate.replace('{Azure-Maps-Primary-Subscription-key}', primaryKey)
        .replace('{longAddress}', encodeURIComponent(longAddress))
        .replace('{country}', country);

    try {
        const {data} = await getGeoData(geoRequestUrl);
        const geoData = data.results[0].position;
        return [geoData.lat, geoData.lon];
    } catch (err) {
        console.error(err);
    }
};

export default geoLocate;

so I'm destructuring the returned promise data from getGeoData. then using the destructured {data} in geoData to get the position object, then I'm returning and array of two numbers [geoData.lat, geoData.lon]. Instead of returning an array it's returning a promise object with the array inside. — Sharper, Feb 07 '21 at 17:48
To `await` inside an **`async`** function means to become asynchronous (promise-returning) yourself, not to block synchronously. — Bergi, Feb 07 '21 at 18:09

score 1 · Answer 1 · answered Feb 07 '21 at 17:47

If you think about it, there is no way geoLocate would return anything other than a promise. geoLocate itself has to wait for data from your API call, so there's no way it can return that data to its caller until it has it. As such it MUST return a promise if you want to use that data from the API call.

You should know that whenever you use async in front of a function declaration, that function automatically returns a promise, so anything that calls it will need to await your function to access the data that is resolved (or use the .then(data => ... syntax).

Why will async/await Axios request not return Data instead of a promise object

1 Answers1