How to manipulate an axios response and return a promise?

Question

What is the correct way to manipulate the return value of a async request made with " axios " and return another Promise ?

This one:

return axios.get('/home.json')
    .then(({ data, ...res }) => 
        new Promise({
            data: data.json(),
            ...res
        })
    )

or

return new Promise(() => {
    const { data, ...res } = await axios.get('/home.json')
    return {
        data: data.json(),
        ...res
    }
})

---

...or none of the above?

Answer 1

Since axios.get() already returns a promise, you can just build on the promise chain and return your eventual value from the end of the chain and it will become the resolved value of the whole promise chain that will go back to the caller:

return axios.get('/home.json').then(data) => 
    // build whatever return value you want here and just return it
    // it will be the resolved value of the parent promise/chain
    // If you want to pack it into an object, you can do so here
    return {data: data};
});

If you need some other asynchronous operation in unpacking the data and building your final result, then just add that asynchronous operation to the above promise chain (returning a promise from inside the chain).

PS I don't understand why you're thinking that .then(({ data, ...res }) is the proper format for an axios promise result. As best I can tell from the documentation, it is not. It resolves with one value, the result of the request. Plus, there is no .json() with axios. It already parses JSON results for you (unlike fetch() ).

If you wanted this to work with fetch() where you do have to separately read and parse the json, you could do this:

return fetch('/home.json').then(response) => 
    return response.json();
}).then(result => {
    // create whatever final result value you want and return it
    return {data: result};
});

_

Answer 2

I feel the best way to go about this is using async-await inside a try-catch block Sample code :

const getApi = async() => {
try{
const {data, ...res} = await axios.get('/home.json')

// this data is already in json usable format

}catch(e){
  console.log('This error occurred',e)
}
}