React 低代码项目：网络请求与问卷基础实现

🍞吐司问卷：网络请求与问卷基础实现

Date: February 10, 2025

---

Log

技术要点：

• HTTP协议
• XMLHttpRequest、fetch、axios
• mock.js、postman
• Webpack devServer 代理、craco.js 扩展 webpack
• Restful API

开发要点：

• 搭建 mock 服务

注：前端项目并不推荐直接使用 mock.js。因为它不支持 fetch，且上线时需要剔除模拟接口。

因此，建议构建一个简易服务端，通过 Koa 搭建一个接口路由用于测试接口。

• Ajax 封装、useRequest 使用
• 分页、LoadMore

---

---

---

Mock 数据

前端 Mock 模拟 Ajax

要点：

• 前端引入 mock.js 测试 api

安装：

npm i mockjs
npm i --save-dev @types/mockjs  // 使用ts需要额外安装

注意点：

• mock.js 只能劫持 XMLHttpRequest，不能劫持 fetch
• 要在生产环境（上线时）注释掉，否则线上请求也被劫持

Case：

**效果：**会执行两次 mock（原因见下）

定义的mock

import Mock from 'mockjs'

Mock.mock('/api/test', 'get', () => {
  return {
    error: 0,
    data: {
      name: 'test',
      age: 18,
    },
  }
})

页面中引用

import React, { FC, useEffect } from 'react'
import styles from './Home.module.scss'
import { useNavigate } from 'react-router-dom'
import { Typography, Button } from 'antd'
import { MANAGE_INDEX_PATHNAME } from '../router'
import axios from 'axios'
import '../_mock/index'

const { Title, Paragraph } = Typography

const Home: FC = () => {
  const nav = useNavigate()
  useEffect(() => {
    axios.get('/api/test').then(res => console.log(res))
  }, [])
  return (
    <div className={styles.container}>
      <div className={styles.info}>
        <Title>问卷调查 | 在线投票</Title>
        <Paragraph>
          已累计创建问卷 100 份，发布问卷 90 份，收到答卷 980 份
        </Paragraph>
        <div>
          <Button type="primary" onClick={() => nav(MANAGE_INDEX_PATHNAME)}>
            创建问卷
          </Button>
        </div>
      </div>
    </div>
  )
}

export default Home

思考：

为什么 useEffect 会执行两次？

React 18 中，useEffect 默认会在开发模式下执行两次，这是为了帮助开发者发现副作用的潜在问题。

参考：

https://github.com/nuysoft/Mock/wiki/Getting-Started

---

---

服务端 nodejs 实现 mock.js

服务端 mock 实现

目标：

• 服务端实现mock

要点：

• mock.js 用于劫持网络请求，并实现丰富的 Random 能力
• mock.js 部署于 nodejs 服务端，并实现 Random 功能

安装：

npm init -y
npm i mockjs
npm i koa koa-router
npm i nodemon  # 用于监听node修改, 不用重启项目

功能实现：

思路：服务端采用 Koa 构建路由处理需要 Mock 的 api

mock文件夹用于存放 Mock 的api，其中 index 做所有 Mock api 的整合。

目录：

.
├── index.js
├── mock
│   ├── index.js
│   ├── question.js
│   └── test.js
├── package-lock.json
├── package.json
└── projectTree.md

2 directories, 7 files

index.js

注意：这里设计 getRes() 可以刻意延迟 1s，模拟 loading 效果

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)
  })
}

mockList.forEach(item => {
  const {url, method, response} = item
  router[method](url, async (ctx, next) => {
    const res = await getRes(response)
    ctx.body = res
  }
  )
})
app.use(router.routes())
app.listen(3002)

mock/index.js

const test = require('./test')
const question = require('./question')

const mockList = [
  ...test,
  ...question
]

module.exports = mockList

question.js

const Mock = require('mockjs')

const Random = Mock.Random

module.exports = [
	{
		url: '/api/question/:id',
		method: 'get',
		response() {
			return {
				error: 0,
				data: {
					id: Random.id(),
					title: Random.ctitle(),
					content: Random.cparagraph()
				}
			}
		}
	}, 
  {
    u