Question

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

2021-09-29

3526

javascript api vue.js async-await promise

在我的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函数后的每一行都没有执行。我做错了什么？

Answer 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
    }
  },
};