0801ajax_mock-网络ajax请求1-react-仿低代码平台项目

0 vite配置proxy代理

vite.config.ts代码如下图所示：

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";// https://vite.dev/config/
export default defineConfig({plugins: [react()],server: {proxy: {"/api": {target: "http://localhost:3001",changeOrigin: true,},},},
});

1 搭建mock服务

1.1 mock作用

• 工作中，经常前后端并行开发
• 前后端商议好API格式，双方各自开发，前端使用mock服务模拟
• 前后端开发完，在对接联调

1.2 技术选型

• 使用mockjs，直接使用
• 使用nodejs服务+ mockjs
• 使用在线mock平台

1.3 mockjs

使用：

• 前端代码引入mockjs
• 定义要模拟的路由、返回结果
• mockjs劫持ajax请求，得到模拟的结果

演示：

_mock/index.ts如下所示：

import Mock from "mockjs";Mock.mock("/api/test", "get", () => {return {errno: 0,data: {name: `张三 ${Date.now()}`,},};
});

Home.tsx中演示，如下：

...
useEffect(() => {// fetch("/api/test")//   .then((res) => res.json())//   .then((data) => console.log("fetch data: ", data));// mockjs 只能拦截XMLHttpRequest，不能拦截fetch请求// mockjs 内部使用XMLHttpRequest API axios.get("/api/test").then((res) => console.log("axios data ", res));}, []);...

效果如下图所示：

使用总结

• 只能拦截XMLHttpRequest，不能拦截fetch请求，有局限
• 要在生产环境注释掉，否则线上请求也被劫持
• 结论：不建议在项目中直接使用mockjs

1.4 nodejs+mockjs

nodejs做服务端情况下使用mockjs

• mockjs两大功能：劫持ajax+ 全面的Random能力
• 把mockjs用户nodejs服务端，使用Random能力

1.4.1 mock模拟请求

第一步：初始化项目questionnaire-mock

npm init -y

第二步：安装不要依赖

npm add mockjs --save

第三步：创建两个mockjs文件，test.js和question.js

const Mock = require('mockjs')const Random = Mock.Randommodule.exports = [{url: '/api/test',method: 'get',response() {return {errno: 0,data: {name: Random.cname()}}}}
]

const Mock = require('mockjs')const Random = Mock.Randommodule.exports = [{url: '/api/question/:id',method: 'get',response() {return {errno: 0,data: {id: Random.id(),title: Random.ctitle()}}}}
]

1.4.2 koa框架开发web服务

第一步：安装依赖

npm install koa koa-router --save

第二步：koa配置使用路由

const Koa = require('koa')
const Router = require('koa-router')const mockList = require('./mock/index')const app = new Koa()
const router = new Router()// 注册mock路由
mockList.forEach(item => {const {url, method, response} = itemrouter[method](url, async ctx => {const res = response()ctx.body = res})
})app.use(router.routes())
// 应用监听3001端口
app.listen(3001)

第四步：配置启动脚本，启动服务

{"name": "questionnaire-mock","version": "1.0.0","main": "index.js","scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "nodemon index.js"},"keywords": [],"author": "","license": "ISC","description": "","dependencies": {"koa": "^2.16.1","koa-router": "^13.0.1","mockjs": "^1.1.0"},"devDependencies": {"nodemon": "^3.1.9"}
}

npm run dev

启动成功，如下图所示：

1.4.3 测试api请求

测试两个接口，如下图所示：

为了更真实模拟网络请求，我给异步请求接口添加请求时间（网络延迟）,代码如下所示：

const Koa = require('koa')
const Router = require('koa-router')const mockList = require('./mock/index')const app = new Koa()
const router = new Router()async function getRes(fn) {return new Promise(resolve => {setTimeout(() => {const res = fn()resolve(res)}, 1000);})
}// 注册mock路由
mockList.forEach(item => {const {url, method, response} = itemrouter[method](url, async ctx => {const res = await getRes(response)ctx.body = res})
})app.use(router.routes())
// 应用监听3001端口
app.listen(3001)

1.4.4 模拟post请求，使用postman测试

question.js新增post接口，代码如下所示：

const Mock = require('mockjs')const Random = Mock.Randommodule.exports = [{url: '/api/question/:id',method: 'get',response() {return {errno: 0,data: {id: Random.id(),title: Random.ctitle()}}}},{url: '/api/question',method: 'post',response() {return {errno: 0,data: {id: Random.id()}}}},
]

postman测试改接口，如下图所示：

1.4.5 测试nodejs服务器api

启动questionnaire，查看Home.tsx接口请求：

import { FC, useEffect } from "react";
// import { FC } from "react";
import { useNavigate } from "react-router-dom";
import { Button, Typography } from "antd";
import axios from "axios";
import { MANAGE_INDEX_PATHNAME } from "../router";
import styles from "./Home.module.scss";// import "../_mock/index.ts";const { Title, Paragraph } = Typography;const Home: FC = () => {const nav = useNavigate();useEffect(() => {fetch("/api/test").then((res) => res.json()).then((data) => console.log("fetch data: ", data));// mockjs 只能拦截XMLHttpRequest，不能拦截fetch请求// mockjs 内部使用XMLHttpRequest API // axios.get("/api/test").then((res) => console.log("axios data ", res));}, []);// function clickHandler() {//   nav({//     pathname: LOGIN_PATHNAME,//     search: "a=20",//   });// }return (<div className={styles.container}><div className={styles.info}><Title>调查问卷 | 在线投票</Title><Paragraph>已累计创建问卷 100 份，发布问卷 90 份，收到问卷 980 份</Paragraph><Button type="primary" onClick={() => nav(MANAGE_INDEX_PATHNAME)}>开始使用</Button></div></div>);
};export default Home;

fetch接口如下图所示：

axios接口如下图所示：

1.5 mock平台

在线mock平台

• Fast-mock Y-API Swagger
• 可能不稳定、不维护，或者网恋不稳定
• 可能存在敏感数据泄漏的风险

优点不耗费资源，成本低。生产强烈不建议使用在线mock平台，除非是个人测试无所谓。

1.6 小结

• 直接在前端使用mockjs，不推荐
• 使用nodejs+mockjs，推荐
• 使用在线mock平台，不推荐

结语

❓QQ:806797785

⭐️仓库地址：https://gitee.com/gaogzhen

⭐️仓库地址：https://github.com/gaogzhen

[1]mock文档[CP/OL].

[2]koa官网[CP/OL].