使用Javascript模拟API调用

Question

我想模拟一个API调用。 我正在VueJS中编写一个应用程序，我目前正在从我创建的硬编码JSON文件中检索我的数据。

例如，从我的App.vue ：

<template>
  <p>{{ teams.yankees.city }}</p> // Will output "New York"
</template>

<script>
  import teams from './teams.json'

  export default {
    data() {
      return { teams }
    }
  }
</script>

从我的teams.json文件：

{
  "yankees": [
    { "city": "New York", "established": 1901, "worldSeries": 27 } 
  ]
  ...
}

我现在可以成功地从我的本地JSON文件中检索我的数据 - 但是我怎样才能使用“函数存根”来检索数据，以便将来允许我交换真正的RESTful API调用？

是否有某处的准系统资源，它显示了如何设置调用我的本地JSON文件的模拟休息服务？

Answer 1

要使用json文件作为模拟数据，除了简单的http服务器之外，您不需要任何其他内容。 将teams.json文件放在项目目录中的某个位置，并使用您选择的http服务器提供它，例如这个简单的零配置命令行http服务器 。

然后使用Vue资源插件访问您的模拟数据：

{
  this.$http.get('http://localhost:8080/teams.json').then((response) => {
    // success callback
  }, (response) => {
    // error callback
  });
}

我猜您不想在服务电话中硬编码网址。 我喜欢做的是有一个映射文件，我在其中定义资源名称并将它们映射到具体路径：

{
  teams: 'http://localhost:8080/teams.json'
}

这样我可以在不改变业务代码的情况下在不同的资源位置之间切换。

如果您需要更复杂的东西，您可以自己构建或查看现有服务，例如mockable.io或apiary.io 。