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

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

MSW

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

使用步骤

1.安装msw

bash 复制代码
npm install msw@latest --save-dev

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

bash 复制代码
// 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、配置入口加载方法

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

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

bash 复制代码
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

bash 复制代码
import { worker  } from './mocks/browser'

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

工程目录

测试

重启项目,然后在项目中调用我们配置的接口/api/login方法

这样,就是实现了前端假数据的模拟

请求封装方法

js 复制代码
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;

项目演示地址: 移动商城

相关推荐
huxihua200615 分钟前
各种前端框架界面
前端
拾光拾趣录15 分钟前
GET/POST 的区别:从“为什么登录请求不能用 GET”说起
前端·网络协议
Carlos_sam32 分钟前
OpenLayers:ol-wind之渲染风场图全解析
前端·javascript
拾光拾趣录41 分钟前
闭包:从“变量怎么还没死”到写出真正健壮的模块
前端·javascript
拾光拾趣录1 小时前
for..in 和 Object.keys 的区别:从“遍历对象属性的坑”说起
前端·javascript
OpenTiny社区1 小时前
把 SearchBox 塞进项目,搜索转化率怒涨 400%?
前端·vue.js·github
编程猪猪侠2 小时前
Tailwind CSS 自定义工具类与主题配置指南
前端·css
qhd吴飞2 小时前
mybatis 差异更新法
java·前端·mybatis
YGY Webgis糕手之路2 小时前
OpenLayers 快速入门(九)Extent 介绍
前端·经验分享·笔记·vue·web
患得患失9492 小时前
【前端】【vueDevTools】使用 vueDevTools 插件并修改默认打开编辑器
前端·编辑器