在 Vue 中使用 promise，我如何从 API 获取数据？答案

【问题标题】：Using promise in Vue, How do i get data from API?在 Vue 中使用 promise，我如何从 API 获取数据？
【发布时间】：2021-11-21 03:08:42
【问题描述】：

在我的 repository.js 中，我有以下内容：

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

在我的 Vue 组件中，我有：

<script>
import repository from "@/api/repository";

export default {
  name: "posts-index",

  data() {
    return {
      apiData: null,
    };
  },

  async mounted() {
    console.log("This prints");
    this.apiData  = await repository.getAllContactRequests().then(result => result.data);
    console.log("This doesn't print");
  },
};
</script>

我没有从promise中获取数据，调用api函数后的每一行都不执行。我做错了什么？

【问题讨论】：

承诺永远不会被解决。不要返回新的 Promise，只需返回 axios.get，因为它已经是一个 Promise。在那种特定情况下（在存储库中），您甚至根本不需要 async
What is the explicit promise construction antipattern and how do I avoid it?
附加说明。使用await 时，大多数情况下不需要then。 this.apiData = await repository.getAllContactRequests().then(result => result.data);可以写成this.apiData = (await repository.getAllContactRequests()).data;
太棒了！到目前为止，一切都很好。现在，我如何实际访问数据？对象是 Promise，我可以以某种方式将其转换为 JSON 吗？还是有更好的方法？

标签： javascript api vue.js async-await promise

【解决方案1】：

假设 API 返回 JSON 数据，您可以将上面的代码重构为：

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

这是因为Axios返回的是Promise，不需要冗余包装成Promise。

要使用响应数据，您只需等待 API 请求：

import repository from "@/api/repository";

export default {
  name: "posts-index",

  data() {
    return {
      apiData: null,
    };
  },

  async mounted() {
    const response = await repository.getAllContactRequests()
    if (response && response.data) {
       this.apiData = response.data
    }
  },
};

【讨论】：