第一部分 – 靜態 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 的資料 – 您的應用程式會認為它正在與真實網路通訊