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

news2025/3/29 13:43:23

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

项目演示地址: 移动商城

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/2322234.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

Windows下VSCode的安装

前言 VSCode的安装看起来平平无奇&#xff0c;但也不是轻轻松松的。笔者将最新的Windows下安装VSCode&#xff0c;以及运行最简单的C程序的过程记录下来&#xff0c;供后续的自己和大家参考。 一、官网下载安装包 Visual Studio Code - Code Editing. Redefined 二、安装 直接…

django入门教程之templates和static资源【五】

使用app01子应用举例说明模板的使用。templates官方文档。 templates完整流程认知 第一步&#xff0c;在settings.py中注册app01子应用。 第二步&#xff0c;在app01目录下&#xff0c;新建templates和static目录&#xff0c;用于存放模板文件和资源文件。目录结构如下&#…

【区块链安全 | 第一篇】密码学原理

文章目录 1.哈希函数1.1 哈希函数的性质1.2 常见哈希算法1.3 Merkle Tree&#xff08;默克尔树&#xff09;1.4 HMAC&#xff08;哈希消息认证码&#xff09; 2. 公钥密码学2.1 对称加密 vs 非对称加密2.2 RSA 算法2.3 ECC&#xff08;椭圆曲线密码学&#xff09;2.4 Diffie-He…

Linux安装MySQL数据库并使用C语言进行数据库开发

目录 一、前言 二、安装VMware运行Ubuntu 1.安装VMware 2.使用VMware打开Ubuntu 三、配置VMware使用网卡 1.添加NAT网卡 四、Linux下安装MySQL数据库 五、安装MySQL开发库 六、演示代码 sql_connect.c sql_connect.h main.c中数据库相关代码 结尾 一、前言 由于最…

2024年MathorCup数学建模A题移动通信网络中PCI规划问题解题全过程文档加程序

2024年第十四届MathorCup高校数学建模挑战赛 A题 移动通信网络中PCI规划问题 原题再现&#xff1a; 物理小区识别码(PCI)规划是移动通信网络中下行链路层上&#xff0c;对各覆盖小区编号进行合理配置&#xff0c;以避免PCI冲突、PCI混淆以及PCI模3干扰等现象。PCI规划对于减少…

Redis实战常用二、缓存的使用

一、什么是缓存 在实际开发中,系统需要"避震器"&#xff0c;防止过高的数据访问猛冲系统,导致其操作线程无法及时处理信息而瘫痪. 这在实际开发中对企业讲,对产品口碑,用户评价都是致命的。所以企业非常重视缓存技术; 缓存(Cache)&#xff1a;就是数据交换的缓冲区&…

通过国内源在Ubuntu20.0.4安装repo

国内三大免费源&#xff1a; 清华大学&#xff1a;清华大学开源软件镜像站 | Tsinghua Open Source Mirror中国科技大学&#xff1a;USTC Open Source Software Mirror阿里云&#xff1a;阿里巴巴开源镜像站-OPSX镜像站-阿里云开发者社区 repo只在清华源网站里搜到&#xff1a;…

【软件测试】:软件测试实战

1. ⾃动化实施步骤 1.1 编写web测试⽤例 1.2 ⾃动化测试脚本开发 common public class AutotestUtils {public static EdgeDriver driver;// 创建驱动对象public static EdgeDriver createDriver(){// 驱动对象已经创建好了 / 没有创建if( driver null){driver new EdgeDr…

unittest自动化测试实战

&#x1f345; 点击文末小卡片&#xff0c;免费获取软件测试全套资料&#xff0c;资料在手&#xff0c;涨薪更快 为什么要学习unittest 按照测试阶段来划分&#xff0c;可以将测试分为单元测试、集成测试、系统测试和验收测试。单元测试是指对软件中的最小可测试单元在与程…

leetcode3.无重复字符的最长字串

采用滑动窗口方法 class Solution { public:int lengthOfLongestSubstring(string s) {int ns.size();if(n0)return 0;int result0;unordered_set<char> set;set.insert(s[0]);for(int i0,j0;i<n;i){while(j1<n&&set.find(s[j1])set.end()){set.insert(s[…

3.25-2request库

request库 一、介绍request库 &#xff08;1&#xff09;requests是用python语言编写的简单易用的http库&#xff0c;用来做接口测试的库&#xff1b; &#xff08;2&#xff09;接口测试自动化库有哪些&#xff1f; requests、urllib 、urllib2、urllib3、 httplib 等&…

Docker-Volume数据卷详讲

Docker数据卷-Volume 一&#xff1a;Volume是什么&#xff0c;用来做什么的 当删除docker容器时&#xff0c;容器内部的文件就会跟随容器所销毁&#xff0c;在生产环境中我们需要将数据持久化保存&#xff0c;就催生了将容器内部的数据保存在宿主机的需求&#xff0c;volume …

蓝桥杯备考之 最长上升子序列问题(挖地雷)

这道题其实就是正常的最长上升子序列问题&#xff0c;但是我们还要把最优方案输出出来&#xff0c;我们可以用个pre数组来维护就行了&#xff0c;每当我们更新以i为结尾的最长子序列&#xff0c;如果i是接在1到i-1某个点后面的话就把前面的点存到pre里面 最后我们把pre倒着打印…

Redisson 实现分布式锁简单解析

目录 Redisson 实现分布式锁业务方法&#xff1a;加锁逻辑LockUtil 工具类锁余额方法&#xff1a;工具类代码枚举代码 RedisUtil 工具类tryLock 方法及重载【分布式锁具体实现】Supplier 函数式接口调用分析 Redisson 实现分布式锁 业务方法&#xff1a; 如图&#xff0c;简单…

信源的分类及数学模型

信源的分类及数学模型 按照信源发出的时间和消息分布分为离散信源和连续信源 按照信源发出符号之间的关系分为无记忆信源和有记忆信源 单符号离散信源&#xff08;一维离散信源&#xff09; 信源输出的消息数有限或可数&#xff0c;且每次只输出符号集的一个消息 样本空间&…

LVS NAT模式实现三台RS的轮询访问

节点规划: 配置RS&#xff1a; RS1-RS3的网关配置均为 192.168.163.8 配置RS1&#xff1a; [rootlocalhost ~]# hostnamectl hostname rs1 [rootlocalhost ~]# nmcli c modify ens160 ipv4.method manual ipv4.addresses 192.168.163.7/24 ipv4.gateway 192.168.163.8 conne…

LSM-Tree(Log-Structured Merge-Tree)详解

1. 什么是 LSM-Tree? LSM-Tree(Log-Structured Merge-Tree)是一种 针对写优化的存储结构,广泛用于 NoSQL 数据库(如 LevelDB、RocksDB、HBase、Cassandra)等系统。 它的核心思想是: 写入时只追加写(Append-Only),将数据先写入内存缓冲区(MemTable)。内存数据满后…

uni-app jyf-parser将字符串转化为html 和 rich-text

uni-app jyf-parser将字符串转化为html-CSDN博客 方法二&#xff1a; rich-text | uni-app

Docker+Ollama+Xinference+RAGFlow+Dify部署及踩坑问题

目录 一、Xinference部署 &#xff08;一&#xff09;简介 &#xff08;二&#xff09;部署 &#xff08;三&#xff09;参数 &#xff08;四&#xff09;错误问题 &#xff08;五&#xff09;Xinference配置Text-embedding模型 &#xff08;六&#xff09;Xinference配…

【机器学习】什么是线性回归?

什么是线性回归&#xff1f; 线性回归是一种 监督学习算法&#xff0c;它通过拟合一个直线&#xff08;或平面&#xff0c;高维空间下是超平面&#xff09;来建立 输入特征 和 输出目标 之间的关系。简单来说&#xff0c;线性回归就是找出一个数学方程&#xff08;通常是线性方…