使用 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 端点。