第一部分 - 静态 GET 处理程序

如您在界面中所见，我们的提醒应用程序正在尝试对它的数据进行 API 请求，但请求失败。

Failing request

这是因为没有 API 服务器供我们的应用程序进行通信。让我们使用 Mirage 来模拟失败的 API 请求。

在您的编辑器中打开 src/server.js 文件，从 miragejs 导入 createServer，并导出一个创建新服务器的默认函数

// src/server.js
import { createServer } from "miragejs"

export default function () {
  createServer()
}

我们在 index.js 中为您导入并运行此函数，但在您自己的应用程序中，您可以根据需要进行连接。

回到应用程序中，如果您打开 JavaScript 控制台，您应该会看到来自 Mirage 的错误

Mirage: 您的应用程序尝试 GET '/api/reminders'，但没有定义路由来处理此请求。

这意味着 Mirage 正在运行，并且提醒应用程序正在发出尚未模拟的 GET 请求。

我们可以使用 routes() 钩子来模拟它。通过复制突出显示的代码来更新您应用程序中的服务器

import { createServer } from "miragejs"

export default function () {
  createServer({
    routes() {
      this.get("/api/reminders", () => ({
        reminders: [],
      }))
    },
  })
}

routes() 钩子是我们定义路由处理程序的方式，而 this.get() 方法使我们可以模拟 GET 请求。第一个参数是我们正在处理的 URL (/api/reminders)，第二个参数是一个使用某些数据对我们的应用程序做出响应的函数。

您应该会看到应用程序重新加载，然后呈现一条消息，内容为“全部完成！”

All done

打开控制台，您会看到 Mirage 使用 200 状态代码和我们处理程序中的对象处理了请求。

让我们向我们的响应添加一些数据

createServer({
  routes() {
    this.get("/api/reminders", () => ({
      reminders: [
        { id: 1, text: "Walk the dog" },
        { id: 2, text: "Take out the trash" },
        { id: 3, text: "Work out" },
      ],
    }))
  },
})

应用程序现在呈现此数据。

All done

恭喜 - 您刚刚编写了您的第一个 Mirage 路由处理程序！

要点

  • Mirage 在浏览器中运行，因此没有新的终端进程需要管理
  • 从 Mirage 返回数据与编写前端代码一样快速和容易
  • 您从未更改您的应用程序代码以使用来自 Mirage 的数据 - 您的应用程序认为它正在与真实网络进行通信