Vue.js 组织 API 端点的最佳方法？

Question

在我的组件上，我必须访问我的端点(API 网关/Lambda)，这目前要求我在每个组件级别上对其进行硬编码。显然不理想，哈哈。

这是我现在在 Vue 组件上的一个例子:

async mounted() {
    axios.get('https://XXXXXXX.execute-api.us-east-1.amazonaws.com/{environment}/{endpoint_name}')
      .then(response => {
        this.data = response.data;
      })
  }

理想情况下，我正在尝试找到一种优雅的方式来填充这些 axios.get() 部分，因此我可以获得执行 ID 和环境的主要引用(dev/qa/prod/etc ).

我是 Vue.js 的新手，所以我正在努力寻找理想的方法。目前我的想法是创建从 main.js 中提取的字符串，然后添加到 .get url 中。如.get(LAMBDA_URL + 'test')，思路？

Answer 1

首先，您可以将所有 api 调用抽象到它们自己的文件中，位于 api 文件夹中。然后，您可以创建自己的 get、post、put 和 delete 方法来执行一些基本的样板文件，例如前置lambda url 和解析常见的东西，例如状态代码。

如果你有一个，你可以通过在你的 vuex 存储中调用这些 api 端点来更进一步。这样做的好处是您的组件不再关心它们从哪里获取数据。获取数据的实现全部在商店中某处的一些 fetch 操作中。您的组件将使用 getter 来显示内容。

// api/index.js
import { apiUrl } from '@/config';

function apiRequest(method, url, data, whatever) {
  return axios({
    method,
    data,
    url: `${apiUrl}/${url}`
    // etc
  });
}

export function get(url, data, whatever) {
  return apiRequest('get', url, data, whatever);
}

// etc

// Component
<template>
  <div>
    {{ data }}
  </div>
</template>

<script>
import { mapGetters } from 'vuex';

export default {
  name: 'my-component',
  computed: {
    ...mapGetters({
      data: 'animals/birds'
    })
  },

  mounted () {
    this.$store.dispatch('animals/fetchBirds');
  }
}
</script>