使用 Javascript 模拟 API 调用

Posted 2023-02-22

【中文标题】使用 Javascript 模拟 API 调用

【英文标题】：Simulating an API call with Javascript

【发布时间】：2017-01-19 10:02:48

【问题描述】：

我想模拟一个 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 文件的模拟休息服务？

【参考方案1】：

要使用 json 文件作为模拟数据，您不需要任何东西，只需要一个简单的 http 服务器。将 teams.json 文件放在项目目录中的某个位置，并使用您选择的 http 服务器为其提供服务，例如 simple, zero-configuration command-line http server。

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

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

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

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

这样我就可以在不同的资源位置之间切换而无需更改我的业务代码。

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