Vue组件调用store封装fetch接口未结束就返回undefined，加async/await报错如何解决？

问题根因 #

postTO方法内部基于fetch实现，本身返回的是Promise异步对象，你没有等待异步请求执行完成就直接解构返回值，此时Promise还处于pending状态，自然拿不到你在then里返回的response和error字段，只能得到undefined。之前使用async/await报错，大概率是你没有在外层包裹的函数上添加async关键字，直接在普通同步函数内使用await会触发语法报错。

修复方案 #

1. 调整组件内调用逻辑 #

将调用逻辑放在标记了async的函数内，用await等待异步请求执行完成后再解构结果：

// login.vue 示例（Vue3 setup语法）
import store from "@/store";

// 异步方法必须加async修饰
const fetchData = async () => {
  const { response, error } = await store.postTO(
    '你的请求url', 
    [{id: "button1"}, {id: "button2"}, {id: "button3"}]
  );
  if (response) {
    console.log(response);
  } else {
    console.warn(error);
  }
}

// 按需调用即可，比如页面挂载后或者点击按钮时触发
fetchData()

2. 可选修复请求参数格式不匹配问题 #

你当前postTO内配置的请求头是Content-Type: application/x-www-form-urlencoded，但传输的body是JSON序列化后的字符串，格式不匹配会导致后端无法正常解析参数，建议统一格式，比如修改请求头为JSON类型：

// store.js 内postTO的requestOptions修改
const requestOptions = {
  method: "POST",
  headers: { "Content-Type": "application/json" },
  body: JSON.stringify(postData)
};

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