使用 Mirage 在 React Native 中模擬 API 請求

模擬您的 React Native 應用程式的 API 請求，以便您在沒有任何後端服務的情況下開發應用程式。

這是為熟悉 Mirage 的人提供的快速入門指南。如果您是 Mirage 的新手，請查看總覽。

步驟 1：安裝 Mirage

首先，請確保您已安裝 Mirage

# Using npm
npm install --save-dev miragejs

# Using Yarn
yarn add --dev miragejs

步驟 2：在您的網路程式碼旁建立伺服器

在 App.js 的頂部，從 Mirage 導入 Server，建立一個伺服器，並開始模擬您的程式碼需要的 API 端點

import React from "react"
import { Text, View } from "react-native"
import { createServer } from "miragejs"

if (window.server) {
  server.shutdown()
}

window.server = createServer({
  routes() {
    this.get("/api/movies", () => {
      return {
        movies: [
          { id: 1, name: "Inception", year: 2010 },
          { id: 2, name: "Interstellar", year: 2014 },
          { id: 3, name: "Dunkirk", year: 2017 },
        ],
      }
    })
  },
})

export default function App() {
  let [movies, setMovies] = React.useState([])

  React.useEffect(() => {
    fetch("/api/movies")
      .then((res) => res.json())
      .then((json) => setMovies(json.movies))
  }, [])

  return (
    <View>
      {movies.map((movie) => (
        <Text key={movie.id}>
          {movie.name} ({movie.year})
        </Text>
      ))}
    </View>
  )
}

請注意，在我們呼叫 createServer() 之前，我們會檢查是否已存在伺服器，如果存在，我們會關閉它。這是必要的，這樣 React Native 的熱模組重載就不會導致同時存在多個伺服器。

現在，每當您的應用程式發出 API 請求時，Mirage 將攔截並回應它。

您已準備好繼續開發您的 React Native 應用程式，並沿途使用 Mirage 模擬您的 API 端點。