javascript - 模拟 Ajax(Reactjs + Mobx)

Question

我想做一些伪造的 ajax 调用，这样当在本地主机上时，我可以从伪造的方法中取回虚拟数据，而不是对我的服务器进行真正的调用(结构可能不存在)。

在 reactjs + mobx 中执行此操作的最佳方法是什么？

我正在考虑制作一个假商店，因为这是我所有操作都通过我的 ajax 调用进行的地方，但这将涉及始终使整个商店具有所有功能。

然后我可能会从商店中提取出 ajax 调用，然后模拟这些调用，但我不确定这样做的最佳方法。

Answer 1

使用 json-server 伪造 api 调用，使用 redux 进行状态管理，我在我的一个项目中使用过它。它非常简单，需要的样板代码非常少。 Redux 通过操作更新全局存储，组件可以订阅存储以获取更改。

在此处查看文档-

https://github.com/typicode/json-server

http://redux.js.org/

来 self 的应用程序的示例- 您可以通过创建一个 db.json 来创建一个假商店，然后您可以使用 json-sever 提供的默认路由或创建您自己的路由。

这可以是你的 db.json

{
    "questions": [
        {
            "id": 2,
            "question": "A train running at the speed of 60 km/hr crosses a pole in 9 seconds. What is the length of the train?",
            "options": [
                "120 metres",
                "180 metres",
                "324 metres",
                "150 metres"
            ],
            "answer": 4
        },
        {
            "id": 3,
            "question": "The length of the bridge, which a train 130 metres long and travelling at 45 km/hr can cross in 30 seconds, is",
            "options": [
                "200 m",
                "225 m",
                "245 m",
                "250 m"
            ],
            "answer": 3
        }
    ]
}

通过在包含 db.json 文件的文件夹中运行此 json-server --watch db.json 来启动此模拟 api。

然后使用http://localhost:3000/questions

如果您想了解有关上述任何内容的更多详细信息，请发表评论。我可以为您提供示例代码，因为我已经实现了这个完整的流程。