axios API - 等待响应答案

【问题标题】：axios API - wait for responseaxios API - 等待响应
【发布时间】：2021-09-23 21:02:54
【问题描述】：

我正在使用 axios 库向服务器发送数据

查询正在运行，但我无法等待 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)
  }

这里是我的帖子请求（axiosAPI 文件）：

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}`));

}

我的 Axios 查询运行良好，数据已发布到服务器。但是我没有成功等待服务器的响应。

console.log('result : ' + res)=>（res 未定义 -> 不等待 axios 响应）

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

如果你能帮我找到一个等待axios结果的解决方案，那就太好了

非常感谢

【问题讨论】：

你的问题是return response.data。它不是将值返回给post 函数，而是返回给then lambda 函数。您可以改为使用 Promise 解析语法或完全异步等待语法。此处的这种混合搭配会造成混淆并导致不良行为。

标签： javascript

【解决方案1】：

您可以将await 与 axios 一起使用：

像这样：

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

还有这个：

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);
    }
}

另见：

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

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

【讨论】：

这是使用 axios 的正确方式，而不是使用 promises async/await 的作用要清晰得多。
感谢您的回答。这是完美的工作。我认为这需要一些异步培训 - 等待和承诺......

【解决方案2】：

由于您的句柄是异步的，因此您需要在 axios 调用之前放置 await。

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

【讨论】：

这是正确的，但不是问题的原因。