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

前后端分离项目，后端还没有接口的时候，前端可以使用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;

项目演示地址: 移动商城