Same situation but different results. I think that Try syntax might be the cause

Question

I encountered axios error in the process of creating my application.

The below code work fine. in the first image,console.log output res.data.

let categoryId = ''

axios.get('/api/max')
    .then((res) => {
        console.log(res.data) // image part
        categoryId = res.data.id
    })
    .catch((err) => {
        console.log('ssssssuuuuu')

    })

('api/max') return category with max ID.

The below code don't work well. console.log(res) output properly, but console.log(res.data) output undefined.

try {
    const res = axios.get('/api/max')
    console.log(res)
    console.log(res.data) // undefined
    categoryId = res.data.id
    console.log('a')
} catch (err) {
    console.log(err.message)
}

what causes undefined? I googled but, I didn't know the cause.

I'm sorry that my English is not very good. Thank you for your help.

Answer 1

You should use await axios.get('/api/max') before using console.log since it's an async call. (you can also use .then but it's less friendly)
Of course, don't forget to wrap your function into an async when using await.

Also, keep in mind that quirk when using console.log. Prefer using Vue devtools to inspect the current state you do have on your page.

Overall, I recommend the usage of async/await over .then all the time.
Here is a nice documentation for that one: https://javascript.info/async-await