react miragejs用法示例

react-miragejs 是一个用于在开发阶段模拟后端 API 的库，它可以让你在没有实际后端服务器的情况下开发和测试前端应用程序。它与 React 配合使用，提供了一个轻量级的、基于浏览器的虚拟 API 服务器。

miragejs 官网：https://miragejs.com/

miragejs的作用

模拟 API：react-miragejs 允许你在前端代码中定义虚拟的 API 路由、模型和响应，以模拟实际后端服务器的行为。

开发环境使用：它通常用于开发环境，以便在开发过程中可以独立于后端进行测试和开发。

轻量级：相对于实际的后端服务器，react-miragejs 是一个轻量级的、基于浏览器的虚拟服务器，可以在开发过程中快速启动和运行。

miragejs用法示例

以下是一个简单的示例，展示了如何在 React 项目中使用 react-miragejs：

1、安装 react-miragejs：

在你的项目中使用以下命令安装 react-miragejs：

# Using npm
npm install --save-dev miragejs

# Using Yarn
yarn add --dev miragejs

2、设置虚拟 API：

在你的项目中创建一个 server.js 文件，并编写虚拟的 API 路由和响应：

import { createServer } from "miragejs"

export default function InitService() {
    createServer({
        routes() {
            this.get("https://api.leavesnet.com/api/navitems", () => {
                return {
                    items: [
                        {
                            id: 1,
                            name: '百度统计',
                            link: 'https://tongji.baidu.com/web5/welcome/login',
                            icon: 'https://tongji.baidu.com/favicon.ico',
                            description: '站式智能数据分析与应用平台'
                        },
                        {
                            id: 2,
                            name: '百度站长工具',
                            link: 'https://ziyuan.baidu.com/indexs/index',
                            icon: 'https://ziyuan.baidu.com/favicon.ico',
                            description: '百度官方收录分析工具'
                        },
                    ]
                }
            });
        },
    })
}

上面的代码，我模拟了调用navitems api得到一个items结果集。

3、在应用中引入虚拟 API：

在你的应用程序入口文件（例如 index.js）中，引入 server.js 文件以启动虚拟 API 服务器：

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
import InitService from './services/mirageService';
import { BrowserRouter } from "react-router-dom";

// 如果是开发环境，引入 server.js 文件以启动虚拟 API 服务器
if (process.env.NODE_ENV === 'development') {
  InitService();
}

const root = ReactDOM.createRoot(document.getElementById('root'));
root.render(
  <React.StrictMode>
    <BrowserRouter>
      <App />
    </BrowserRouter>
  </React.StrictMode>
);

在上述示例中，我们使用 miragejs 创建了一个虚拟的 API 服务器，然后在 React 组件中通过 fetch 方法来获取虚拟 API 返回的数据。我们在代码中如果调用navitems api那么不会真是请求api，而是获取虚拟API返回的数据。我们可以在浏览器的Console Info里看到虚拟的API请求和Response，如下图所示：