How can I get data from axios promise object?

Question

I want to get variable from axios Promise data but it doesn't assign my variable.

const axios = require('axios');

let url = 'localhost:3000'
let id = ''
let token = 'my-token'

let api = axios.create({
    baseURL: url,
    withCredentials: false,
    headers: {
        'Accept': 'application/json',
        'Content-Type': 'application/json',
        "Access-Control-Allow-Origin": "*"
    }
})

const getNotices = function (id, token) {
    var arr = []
    let result = api
        .request({
            url: `/notices/${id}/${token}`,
            method: "get",
        })
        .then(res => {
            arr = res.data
            console.log('in', arr)
        })
    console.log('out', arr)
    return arr
}

getNotices(id, token)

I want to print 'arr' but the result is different 'inside' and 'outside' of the api.

the result of code below is

out []
in [Array(3)]

I don't know why it's different.

I want to use this code for vuejs module but I can't export the data.

---

edit - tyskr's code like this

const getNotices = function (id, token) {
    return api
        .request({
            url: `/notices/${id}/${token}`,
            method: "get",
        })
        .then(res => {
            return res.data
        })
}

getNotices(id, token).then(function (arr) {
    console.log(arr)
})

but I can't access yet like this

const getNotices = function (id, token) {
    return api
        .request({
            url: `/notices/${id}/${token}`,
            method: "get",
        })
        .then(res => {
            return res.data
        })
}
var result = []
getNotices(id, token).then(function (arr) {
    result = arr
})

I think they have different scopes right?

Answer 1

You need to use async await like below.

const getNotices = async function (id, token) {
var arr = []
let result = await api
    .request({
        url: `/notices/${id}/${token}`,
        method: "get",
    })
    .then(res => {
        arr = res.data
        console.log('in', arr)
    })
    console.log('out', arr) // this line is executing before the response you get from url so we need to use async await
    return arr

Answer 2

if you re-arranged the code in the following manner:

const getNotices = function (id, token) {
    var arr = []
    return api
        .request({
            url: `/notices/${id}/${token}`,
            method: "get",
        })
        .then(res => {
            arr = res.data
        })
}

getNotices(id, token).then(function(arr){
    console.log(arr); //should solve your issue
})

Then you should be able to get a consistent arr value.

Let me know if that does not work ...

Answer 3

You have to get the first index of the response

 const axios = require('axios'); let url = 'localhost:3000' let id = '' let token = 'my-token' let api = axios.create({ baseURL: url, withCredentials: false, headers: { 'Accept': 'application/json', 'Content-Type': 'application/json', "Access-Control-Allow-Origin": "*" } }) const getNotices = function(id, token) { var arr = [] let result = api .request({ url: `/notices/${id}/${token}`, method: "get", }) .then(res => { arr = res.data[0] console.log('in', arr) }) console.log('out', arr) return arr } getNotices(id, token)