簡介

Mirage 是一個 JavaScript 函式庫，可讓前端開發人員模擬後端 API。

與其他模擬函式庫不同，Mirage 可以輕鬆重新建立動態情境，這類情境通常只有在使用真正的生產伺服器時才有可能實現。

幾乎所有 JavaScript 應用程式都會與 HTTP API 互動。當您在開發期間達到需要使用動態伺服器資料的程度時，您有幾個選項

代理到您實際後端的本機或託管版本。 如果您已經有 API，這可能有效，但通常您沒有。即使您有，很多時候您也會想要使用與實際 API 上的伺服器狀態不同的狀態。
註解掉應用程式的網路請求，並將其取代為虛擬資料。 這是最快的選項，但會迫使您在編寫大量應用程式程式碼之後，才處理網路問題。
使用用戶端攔截器處理應用程式的網路請求。 一些 HTTP 用戶端帶有模擬轉接器（例如，axios-mock-adapter 可用於模擬使用 axios 發出的請求），並且還有一些獨立工具（例如 Pretender）可用於在瀏覽器中攔截應用程式的網路請求。這是最彈性的方法，但需要您在每個專案中從頭開始，並且讓您自己強制執行應用程式之間的慣例。

Mirage 的建立就是為了解決這些問題。它是在用戶端執行的假伺服器，可用於開發和測試，並且帶有足夠的慣例，可讓您快速啟動並執行。

運作方式

Mirage 在瀏覽器中執行。它會攔截 JavaScript 應用程式發出的任何 XMLHttpRequest 或 fetch 請求，並讓您模擬回應。這表示您可以開發和測試應用程式，就像它與真正的伺服器對話一樣。

假設我們正在開發這個 React 元件

// App.js
import React, { useState, useEffect } from "react"

export function App() {
  let [users, setUsers] = useState([])

  useEffect(() => {
    fetch("/api/users")
      .then((response) => response.json())
      .then((json) => setUsers(json))
  }, [])

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

我們使用簡單的 Mirage 路由處理器來處理其發出的 /api/users 網路請求，如下所示

// App.js
import React, { useState, useEffect } from "react"
import { createServer } from "miragejs"

createServer({
  routes() {
    this.get("/api/users", () => [
      { id: "1", name: "Luke" },
      { id: "2", name: "Leia" },
      { id: "3", name: "Anakin" },
    ])
  },
})

export function App() {
  let [users, setUsers] = useState([])

  useEffect(() => {
    fetch("/api/users")
      .then((response) => response.json())
      .then((json) => setUsers(json))
  }, [])

  return (
    <ul>
      {users.map((user) => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  )
}

重要的是，由於 Mirage 模擬的是 HTTP 邊界，而不是應用程式用來發出網路請求的 JavaScript 程式碼，因此您永遠不需要修改 UI 程式碼來考慮應用程式是與 Mirage 對話還是與實際的生產後端對話。

除了攔截 HTTP 請求之外，Mirage 還提供了模擬資料庫和輔助函式，讓您能夠輕鬆模擬動態後端服務。

Mirage 借鑒了典型伺服器端框架的概念，例如：

路由 (routes) 來處理 HTTP 請求
一個資料庫 (database) 和模型 (models) 來儲存資料和定義關係
工廠 (factories) 和固定裝置 (fixtures) 來存根化資料，以及
序列化器 (serializers) 來格式化 HTTP 回應

以協助您快速配置模擬伺服器。

下一步

安裝