I'am sending data to server with axios library

the query is working, but i'am not able to wait the answer of axios

import axios from '../helper/axiosAPI'

 /** data send to axios */
 let formData = new FormData();
 formData.append('file',this.file);

 /**Axios query */
 try{
    axios.post(formData)  
    .then(res=> console.log('result : ' + res)) // no data recieve              
  }
  catch(err){
    console.log(err)
  }

here my post request (axiosAPI file):

axios = require('axios').default;
const uri = process.env.VUE_APP_URI;
const endPoint = 'professional/upload'

 exports.post = async (formData) =>{
 axios({
    method:'post',
    url:uri + endPoint,
    data:formData,
    headers:{
        "Content-Type": "Content-Type: multipart/form-data"
    }
})
.then(response => {   
    console.log('axios : ' + response) // response is recieved    
    return response.data })
.catch(err => console.log(`Erreur AXIOS API : + ${err}`));

}

my Axios query work well and data is post to server. But i am not succed to wait the reponse from the server.

console.log('result : ' + res)=> (res is undefined -> not waiting for axios response)

console.log('axios : ' + response) =>(response is recieve from server)

It will be very nice if you help me to find a solution to wait axios result

thanks a lot

I'am sending data to server with axios library

the query is working, but i'am not able to wait the answer of axios

import axios from '../helper/axiosAPI'

 /** data send to axios */
 let formData = new FormData();
 formData.append('file',this.file);

 /**Axios query */
 try{
    axios.post(formData)  
    .then(res=> console.log('result : ' + res)) // no data recieve              
  }
  catch(err){
    console.log(err)
  }

here my post request (axiosAPI file):

axios = require('axios').default;
const uri = process.env.VUE_APP_URI;
const endPoint = 'professional/upload'

 exports.post = async (formData) =>{
 axios({
    method:'post',
    url:uri + endPoint,
    data:formData,
    headers:{
        "Content-Type": "Content-Type: multipart/form-data"
    }
})
.then(response => {   
    console.log('axios : ' + response) // response is recieved    
    return response.data })
.catch(err => console.log(`Erreur AXIOS API : + ${err}`));

}

my Axios query work well and data is post to server. But i am not succed to wait the reponse from the server.

console.log('result : ' + res)=> (res is undefined -> not waiting for axios response)

console.log('axios : ' + response) =>(response is recieve from server)

It will be very nice if you help me to find a solution to wait axios result

thanks a lot

• javascript

• Your problem is the return response.data. It is not returning the value to the post function but to the then lambda function. You could instead use either Promise resolve syntax or full async await syntax. This mix and match here is confusing and causing unwanted behavior. – Gonnen Daube Commented Sep 23, 2021 at 21:12

2 Answers 2

You can use the await with axios:

Like this:

try
{
    let res = await axios.post(formData);
    console.log('result : ' + res); // no data received
}
catch(err)
{
    console.log(err);
}

and this:

const axios = require('axios').default;
const uri = process.env.VUE_APP_URI;
const endPoint = 'professional/upload';

exports.post = async (formData) =>{
    try
    {
        let response = await axios(
            {
                method: 'post',
                url: uri + endPoint,
                data: formData,
                headers:
                {
                    "Content-Type": "Content-Type: multipart/form-data"
                }
            }
        );

        console.log('axios : ' + response); // response is received    
        return response.data;
    }
    catch (err) 
    {
        console.log(err);
    }
}

See also:

https://stackoverflow./a/49661388/194717

https://www.npmjs./package/axios

Since your handle is async so you need to put await before axios calling.

exports.post = async (formData) =>{
 return await axios({
    method:'post',
    url:uri + endPoint,
    data:formData,
    headers:{
        "Content-Type": "Content-Type: multipart/form-data"
    }
})