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.Random

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

const Mock = require('mockjs')

const Random = Mock.Random

module.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} = item
  router[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} = item
  router[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.Random

module.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].