【react18】react项目使用mock模拟后台接口

news2025/4/21 13:13:58

前后端分离项目，后端还没有接口的时候，前端可以使用mockjs的技术实行假数据的模拟。这里使用的是mock的库msw实现这个业务.

MSW

msw是mock的工具，官网地址是在这里

使用步骤

1.安装msw

npm install msw@latest --save-dev

2.新建存放mock接口的文件夹

// src/mocks/handlers.js
import { http, HttpResponse } from 'msw'
 
export const handlers = [
  // Intercept "GET https://example.com/user" requests...
  http.get('/api/login', () => {
    // ...and respond to them using this JSON response.
    return HttpResponse.json({
      id: 'c7b3d8e0-5e0b-4b0f-8b3a-3b9f4b3d3b3d',
      firstName: 'John',
      lastName: 'Maverick',
    })
  }),
]

3.react项目的公共文件夹

npx msw init ./public

会生成一个文件，这个文件内容我们暂时可以不管它，进去看看也行,此时package.json文件变化了，增加了msw的配置项
在这里插入图片描述

4、配置入口加载方法

// src/mocks/browser.js
import { setupWorker } from 'msw/browser'
import { handlers } from './handlers'
 
export const worker = setupWorker(...handlers)

5.在入口文件里面加载mock的主方法

async function enableMocking() {
  if (process.env.NODE_ENV !== 'development') {
    return
  }
 
  const { worker } = await import('./mocks/browser')
 
  // `worker.start()` returns a Promise that resolves
  // once the Service Worker is up and ready to intercept requests.
  return worker.start()
}

当然，也可以不用动态import

import { worker  } from './mocks/browser'

if(process.env.NODE_ENV === 'development') {
  worker.start()
}

工程目录

在这里插入图片描述

测试

重启项目，然后在项目中调用我们配置的接口/api/login方法
在这里插入图片描述
这样，就是实现了前端假数据的模拟

请求封装方法

import axios, { AxiosRequestConfig } from "axios";
import { useRef, useState } from "react";
function useRequest<T>(url: string, config: AxiosRequestConfig) {
  const [data, setData] = useState<T | null>(null);
  const [loading, setLoading] = useState(false);
  const [error, setError] = useState(null);
  const controllerRef = useRef(new AbortController());

  const cancelRequest = () => {
    controllerRef.current.abort();
  };
  const fetchData = async () => {
    // 清除数据
    setData(null);
    setError(null);
    setLoading(false);
    try {
      setLoading(true);
      const response = await axios.request<T>({
        url,
        ...config,
        signal: controllerRef.current.signal,
      });
      setData(response.data);
      console.log("🚀 ~ fetchData ~ response:", response);
    } catch (error: any) {
      setError(error || "An error occurred");
    } finally {
      setLoading(false);
    }
  };

  return { data, loading, error, fetchData, cancelRequest };
}

export default useRequest;