使用axios发送POST请求无法获取服务端返回响应的问题咨询

• 你封装的post方法使用async声明，但内部没有返回axios的Promise实例，也没有搭配await处理异步逻辑，导致调用方拿到的Promise resolve值默认为undefined
• 封装的post请求headers配置错误，重复声明了Content-Type:字段，会引发请求头异常
• 调用侧的try/catch搭配.then的写法存在逻辑问题，同步的try/catch无法捕获Promise异步抛出的异常，需要统一为全Promise链式调用或者全async/await写法

第一步：修正axiosAPI封装的post方法 #

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

exports.post = async (formData) =>{
  // 返回axios请求的Promise实例，将结果传递到调用侧
  return 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}`)
    // 抛出错误，确保调用侧可以捕获异常
    throw err
  });
}

第二步：修正调用侧代码 #

写法1：Promise链式调用 #

import axios from '../helper/axiosAPI'

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

/**Axios query */
axios.post(formData)  
.then(res=> console.log('result : ' + res))
.catch(err=> console.log(err))

写法2：async/await写法（更易读） #

import axios from '../helper/axiosAPI'

// 调用逻辑放在async函数内
const uploadFile = async () => {
  /** data send to axios */
  let formData = new FormData();
  formData.append('file',this.file);
  try{
    const res = await axios.post(formData)
    console.log('result : ' + res)
  } catch(err) {
    console.log(err)
  }
}

// 执行上传逻辑
uploadFile()

• Promise链式调用依赖前一个回调的返回值传递结果，封装的post方法必须返回Promise实例，调用侧的.then才能拿到返回结果
• async函数默认返回Promise，内部如果没有return语句，Promise会直接resolve为undefined，这是你之前res为undefined的核心原因
• 封装层的catch块如果不主动抛出错误，调用侧的异常捕获逻辑会失效，导致错误被吞

内容的提问来源于stack exchange，提问作者aviateur22