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操作来完成。您的组件将使用吸气剂来显示事物。

// 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>

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

1 个答案: