Vue中使用Promise调用API获取数据失败排查：请求后代码不执行且无法获取数据

你的问题核心在于手动创建的Promise没有调用resolve或reject，导致Promise一直处于挂起（pending）状态，await会无限等待这个Promise完成，后续代码自然无法执行。另外还有个小问题：axios的请求本身就返回Promise，没必要额外再包一层Promise，这属于冗余操作还容易出错。

第一步：修复repository.js中的代码 #

推荐方案（去掉冗余的Promise包装） #

既然axios的get方法本身就返回Promise，直接return它即可，async函数会自动把返回值包装成Promise：

async getAllContactRequests() {
  return axios.get("http://127.0.0.1:8000/api/contactRequests", {
    headers: {
      "Authorization": "Bearer " + sessionStorage.getItem("user_token")
    }
  });
}

如果你坚持要手动包装Promise（不推荐） #

必须在axios请求完成后调用resolve传递结果，同时用reject处理错误，避免Promise一直挂起：

async getAllContactRequests() {
  return new Promise((resolve, reject) => {
    axios.get("http://127.0.0.1:8000/api/contactRequests", {
      headers: {
        "Authorization": "Bearer " + sessionStorage.getItem("user_token")
      }
    })
    .then(response => resolve(response)) // 关键：兑现Promise，传递响应数据
    .catch(error => reject(error)); // 处理错误，避免Promise挂起
  });
}

第二步：优化Vue组件中的代码 #

使用await时可以直接获取响应结果，无需额外的.then，同时建议加上try/catch处理请求失败的情况：

<script>
import repository from "@/api/repository";
export default {
  name: "posts-index",
  data() {
    return {
      apiData: null,
    };
  },
  async mounted() {
    console.log("This prints");
    try {
      const response = await repository.getAllContactRequests();
      this.apiData = response.data;
      console.log("This will print now!");
    } catch (error) {
      // 处理请求失败的情况，比如token无效、网络错误等
      console.error("Failed to load contact requests:", error);
    }
  },
};
</script>

为什么原来的代码会卡住？ #

你创建的Promise没有调用resolve，它永远不会进入"已兑现"（fulfilled）状态，await会一直等待这个Promise完成，导致后续代码被阻塞，永远执行不到。这是使用Promise时很常见的新手错误——忘记兑现或拒绝Promise。

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