Accessing data from an async function in React and Typescript

Question

I've been trying to figure out how to access the data I'm returning from an async function in React while also using Typescript. I'm getting really confused about data types and what I should put where. Hoping someone can help me out. Here is the code of my function making the request, and the function that's using that data:

async getLatLong(location: string): Promise<WeatherAPI> {
        const response = await axios.get<WeatherAPI>(`${this.latLongUrl}q=${location}`)

        return response.data;
    }
    
    async getWeather(location: string) {
        const latLong = this.getLatLong(location);

        console.log(latLong);
    }

And here's the code of the defined interface:

export interface WeatherAPI {
    country: string,
    lat: number,
    local_names: object,
    lon: number,
    name: string,
    state: string
}

I'm not getting an error with this code, but all it's logging is Promise{<pending>} instead of the data I'm expecting. If I try to change console.log(latLong) to console.log(latLong[0]) as the data is an array, I get the error Property '0' does not exist on type 'Promise<WeatherAPI>'.

To access the eventual value of a promise, await that promise. So const latLong = await this.getLatLong(location) — Nicholas Tower
– Nicholas Tower, Commented Jun 19, 2022 at 0:44
@NicholasTower Thanks so much. If you want to put that as the answer, I would be happy to accept it. — Arak Tai'Roth
– Arak Tai'Roth, Commented Jun 19, 2022 at 2:03

Adam Urban · Accepted Answer · 2022-06-19 05:56:18Z

2

One addition to the answer in the comment: you can also use then to handle the promise value:

getLatLong(location).then((latlong) => {...})

Same with await:

const latLong = await this.getLatLong(location)

Read more about promises in the MDN Docs if you're interested.

answered Jun 19, 2022 at 5:56

Adam Urban

464 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Accessing data from an async function in React and Typescript

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related