Async/Await functions

Question

I'm trying to pull the data from a url, but am unsure as to what I'm doing wrong. When I console.log the returned result.data, I get a Promise, but when I console.log result.data inside of my function, I get all of the data. Here is my code:

async function getTeams() {
    const result = await axios({
        method: "get",
        url: 'http://api.sportradar.us/ncaafb-t1/teams/FBS/2018/REG/standings.json?api_key=sg8pf7bdjt5u8ueedttyytwx',
    });
    console.log(result.data);
    return result.data;
}
console.log(getTeams());

I'm not sure what I should be doing differently to get a completed promise.

EDIT: I needed to use a getTeams().then() with callbacks to work better. However, now I am running into an issue of storing the data inside the .then() that I can access into global variables. My code now looks like:

async function getTeams() {
    const result = await axios({
        method: "get",
        url: 'http://api.sportradar.us/ncaafb-t1/teams/FBS/2018/REG/standings.json?api_key=sg8pf7bdjt5u8ueedttyytwx',
    });
    return result.data;
}
let teams = [];
getTeams().then(data => {
    let acc = data.division.conferences[0];
    for (let i = 0; i < acc.teams.length; i++) {
        teams.push(acc.teams[i]);
    }
})

Does this answer your question? [How do I return the response from an asynchronous call?](https://stackoverflow.com/questions/14220321/how-do-i-return-the-response-from-an-asynchronous-call) — Jared Smith, Nov 04 '19 at 17:59
You aren't doing anything wrong: you the result of calling an async function will *always* be a promise. — Jared Smith, Nov 04 '19 at 17:59
Everything that depends on that promise output must be inside the then callback, or use await inside a async function. — Elias Soares, Nov 04 '19 at 18:00
I don't think so. I tried reading through it and I think I understand async/await functions, as well as how Promises work, but don't know what to do — Timothy Wilmot, Nov 04 '19 at 18:04
Thank you Elias. I guess I didn't understand the .then() part of the Promise output, thank you! — Timothy Wilmot, Nov 04 '19 at 18:06
@TimothyWilmot when you `await` something the flow of execution *doesn't stop there*. It simply queues up the `await`ed code to run once the Promise being `await`ed settles. Common misconception. So you can't just expect it to run in-order from top to bottom: it doesn't turn async code into synchronous code, it just makes it *look* that way. — Jared Smith, Nov 04 '19 at 18:06
How would I store it in a variable instead of console.logging it? I know that the .then() function expects a callback, so I expect that we need to use something else — Timothy Wilmot, Nov 04 '19 at 18:15
@TimothyWilmot That depends on what you want to do with it. Usually you just want to use the data somehow, so you have `getTeams().then(data => { /* do something with data */ })`. — cdhowie, Nov 04 '19 at 18:17
Suppose I want to store this data somewhere for future reference. The data retrieved from above gives a large JSON file that essentially separates by conference, and inside each conference has several teams. If I wanted to store all teams in the ACC, I thought I would go to conference with ACC as name (data.division.conferences[0]) and loop through and essentially push each element (data.division.conferences[0].teams[i]) onto the empty array. However, my array continues to return undefined, but console.log(data.division.conferences[0].teams[i]) print out each team exactly how I think it should — Timothy Wilmot, Nov 04 '19 at 21:00

cdhowie · Accepted Answer · 2019-11-04T18:00:38.633

1

Async functions always return a promise. At the time you log the return value, the async operation is not yet complete -- control must return to the JavaScript main loop before the async operation can continue.

You must await the returned promise:

getTeams().then(console.log.bind(console));

edited Nov 04 '19 at 18:00

answered Nov 04 '19 at 17:59

cdhowie

158,093
24
286
300

Binding the console context is not necessary. At least not in chrome/node. – Jared Smith Nov 04 '19 at 18:00
@JaredSmith Yes, I know. We don't know if OP is using either of those environment, so I'm not going to give them code that will only work in that case. – cdhowie Nov 04 '19 at 18:01
Curious, what environment requires it? I apparently need to get out more often... – Jared Smith Nov 04 '19 at 18:01
@JaredSmith Transpiled ES6 running in a browser that requires the console methods to be bound. – cdhowie Nov 04 '19 at 18:03

score 0 · Answer 2 · answered Nov 19 '21 at 00:24

The solution to my question with respect to Promises is to restructure my code such that the code that needs the Promise's response is done inside the Promise. You can nest a function inside the Promise, change state (if using something like React) inside a Promise that gets executed later, or a variety of other things.

getTeams.then(teams => {
    // Print out each team
    for (let i = 0; i < teams.length; i++) {
         console.log(teams[i]);
    }

    // Set state (in React)
    setTeams(teams);

    // Do other stuff with teams
}

Async/Await functions

2 Answers2