我应该如何格式化这个模拟 JS 数据，以便我可以在 get 请求后使用它

Question

>我有一个收集ID的输入字段，应该使用该ID来查找相应的条目。下面是我目前拥有的，底部是我想要的。

我可以获取文件的内容，但我无法对它做任何事情。

我目前拥有的：

// mock-data.js
{
  id: "239491",
  name: "Big Bird",
  real: false,
  type: "Animal"
}

在我的 Vue 文件中，我正在使用 axios 进行GET调用

// search-file.Vue
axios.get('static/mock-data.js')
  .then((response) => {
    console.log(response.data)
  })
  .catch((error) => {
    console.error(error)
  })

这会记录出看似巨大的字符串，因为控制台中没有语法突出显示。

我想要的是这样的：

{
  entries: [
    "239491": {
      id: "239491",
      name: "Big Bird",
      real: false,
      type: "Animal"
    },
    "983502": {
      id: "983502",
      name: "Frodo",
      real: false,
      type: "Hobbit"
    },
    ...
    ...
  ]
}

理想情况下，我的 Vue 代码是这样的：

axios.get('static/mock-data/entries/' + userInput)
  .then((response) => {
    console.log(response.data)
  })
  .catch((error) => {
    console.error(error)
  })

我知道这不是正确的语法，但我找不到解决方案

Answer 1

如果您尝试创建用于测试目的的数据或不阻止前端开发，为什么不直接调用它？我会做的是 f

function mockDataService() {
  var mockData = {
    entries: [
      "239491": {
        id: "239491",
        name: "Big Bird",
        real: false,
        type: "Animal"
      },
      "983502": {
        id: "983502",
        name: "Frodo",
        real: false,
        type: "Hobbit"
      }
    ]
  };
  return {
    getMockDataById: function(id) {
      //return mock data by id
    }
  }
}
//you can mock out axios or just create a fake promise.
function callMockData(userInput) {
  return {
    then: function(success, failure) {
      success(mockDataService.getMockDataById(userInput))
    }
  }
}