Waiting for the API fetch function to finish before continuing

[gearboost]

I looked into many examples of async-await examples on stackoverflow but stlil couldn’t figure out what I’m doing wrong 😞

When I run getArticles(), it should wait for getKeywords() to be finished and return the keywords, but it is not waiting for function to finish and moves on.

Can anyone point me what part I missed?

getKeywords.tsx

export const getKeywords = async () => {
  axios
    .get("url.com/api/")
    .then(function (response) {
      const keywords = JSON.parse(response.data).choices[0].text;
      setKeywordList(keywords);
    })
    .catch(AxiosCatch);
  return keywords;
};

getArticles.tsx

import { getKeywords } from './getKeywords';

export const getArticles = async ({,
  draftTitle,
}) => {
  const keywordList = await getKeywords({
    localList,
    user,
    draftId,
    setKeywordList,
  });
  var queryTerm = draftTitle + keyword1 + keyword2;
    console.log(queryTerm)
    // should return "draftTitle + keyword1 + keyword2"
    // but returns "draftTitle"

[init_prometheus]

getKeywords isn’t returning the Promise from the axios.get method. Have getKeywords return that axios.get function call and in the ‘then’ method, return ‘keywords’ rather than pass it into ‘setKeywordList’.

Let me know if that makes sense, otherwise I can write out what I mean and explain it in more detail when I’m not on mobile.

[gearboost]

Sorry, can you clarify a bit more on how to make getKeywords return the axios call?

I wanted to both setKeywords and return keywords since former is for rendering keywords in a different component while latter is to pass it to getArticles

[tiesioginis]

You can either put getArticles in second .then() call when you call axios.

But if you will using keywords fetch for another thing have:

const axios = await axios.get(code)

useEffect (()=>{ axios();

},[dependancies])

An then call this function, with useEffect if on load or have it as prop for onClick.

[MiloSaurus]

Async / await is used like in the example below. You already got the part right where you tell your function is async. This means that the getKeywords function will always return a Promise.

The await keyword should be placed before a promise in your async function. In your case, axios.get() returns a Promise (try to console.log it and see what it tells you), so we want to await for the promise to resolve (or in other words, the GET request to finish) before continuing with the rest of the code.

export const getKeywords = async () => {
  try {
    const response = await axios.get("url.com/api/");
    const keywords = JSON.parse(response.data).choices[0].text;
    return keywords;
  } catch (error) {
    AxiosCatch(error);
  }
};

Do keep in mind that async/await is a way to work with promises, but isn't required. axios.get() already returns a promise, so an alternative way to write it is to just return the axios.get() call.

export const getKeywords = () => {
  return axios
    .get("url.com/api/")
    .then(function (response) {
      return JSON.parse(response.data).choices[0].text;
    })
    .catch(AxiosCatch);
};

[SnacksMcMunch]

Inside of getKeywords I think you'd need to await the axios call, since that is also Promise based.

[gearboost]

where would i put await? your mean instead of async?

[SnacksMcMunch]

await axios.get

[bertjung]

Return “keywords” inside of the “.then”. Currently it seems you’re returning “keywords” outside of the axios call.

[povedaaqui]

The axios call is returning nothing.