Javascript Async/await with axios resolve pending

Question

I have a simple, question. I try to found a solution on web but every try failed. I have this code:

   const getSideBarMenu1 = async () => {
      let myArray = []
      await axios.get('https://jsonplaceholder.typicode.com/posts').then(res => {
        console.log('res1', res)
        myArray = res.data
      }).catch(err => console.log(err))
      console.log('myArray', myArray)
      return myArray
    }

And when I use this function like this:

 const useFunction = getSideBarMenu1()
    console.log('useFunction', useFunction)

the result of console log is:

useFunction Promise {<pending>}
__proto__: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: Array(100)

How to save the PromoseResult inside a variable? Thank you everyone!

It's because `getSideBarMenu1` is an Async function. So you need to call it with `await getSideBarMenu1()` — CyberEternal, Jun 08 '21 at 09:44
Unexpected reserved word 'await' is what terminal return. I'm using vuexy template for VueJS — Alberto Torrisi, Jun 08 '21 at 10:44
You can use `.then()`. A promise can be called by the await only within an async function. So you can do the following `getSideBarMenu1().then(res => console.log(res)).catch(err => console.log(err))` — CyberEternal, Jun 08 '21 at 10:48

score 1 · Answer 1 · answered Jun 08 '21 at 09:40

1

You need to wait for the promise to fulfill, before accessing its result:

const useFunction = await getSideBarMenu1()

answered Jun 08 '21 at 09:40

moustafa

251
2
11

terminal give me syntax error : Unexpected reserved word 'await'. – – Alberto Torrisi Jun 08 '21 at 10:40

score 1 · Answer 2 · answered Jun 08 '21 at 09:42

1

getSideBarMenu1 is async that returns a Promise, meaning you have to await it.

const useFunction = await getSideBarMenu1();

You can also use .then()

answered Jun 08 '21 at 09:42

axtck

3,707
2
10
26

I know! But if I use await i can't compile. terminal give me syntax error : Unexpected reserved word 'await'. – Alberto Torrisi Jun 08 '21 at 10:29

score 0 · Answer 3 · answered Jun 08 '21 at 09:45

0

You can also return data directly from getSideBarMenu1 function:

const getSideBarMenu1 = async () => {
  const {data} = await axios.get('https://jsonplaceholder.typicode.com/posts')
  return data
}


const useFunction = await getSideBarMenu1()

answered Jun 08 '21 at 09:45

Daniel

2,621
2
18
34

score 0 · Answer 4 · answered Jun 08 '21 at 09:45

You forgot a little keyword here.

const useFunction = await getSideBarMenu1()
console.log('useFunction', useFunction)

article source: https://jasonwatmore.com/post/2020/04/30/vue-fetch-http-get-request-examples video source: https://www.youtube.com/watch?v=NHfyF0B4y8E

Javascript Async/await with axios resolve pending

4 Answers4