React中使用mockjs模拟接口请求数据

· 997 words · 2 minute read

在react项目中使用mockjs模拟后端数据。

在react项目开发中，有时需要模拟后端数据，以方便前端开发和测试。mockjs是一个模拟后端数据的工具库，通过axios和mockjs的结合使用可以生成数据，用于前端开发和测试。

配置axios: src/api/index.js文件

import axios from "axios";
import config from "./config";

const instance = axios.create({
  baseURL: config.baseURL, //设置自己的后端接口地址
  timeout: 5000,
  headers: {
    "Content-Type": config.contentType,
  },
});

instance.interceptors.request.use(
  (config) => {
    return config;
  },
  (error) => {
    return Promise.reject(error);
  }
);

instance.interceptors.response.use(
  (response: { data }) => {
    return response.data;
  },
  (error) => {
    console.log(error.message);
    return Promise.reject(error);
  }
);
export default instance;

编写api dept.js

import service from './index';
export const reqDeptList = (data = {}) => {
  return service({
    url: "/depts",
    method: "post",
    data,
  });
};

安装 mockjs

yarn add mockjs

项目根目录下创建 mock 文件夹（public文件夹同级），并在该文件夹下创建文件dept.js 用来模拟后端返回的数据

mock/dept.js

const list = [
  {
    id: "1",
    key: "1",
    deptName: "华东分部",
    age: 32,
    sort: 1,
    remark: "New York No. 1 Lake Park",
    txTime: "2008-03-06 05:32:38",
    status: "0",
    children: [
      {
        key: "10",
        deptName: "研发部",
        age: 32,
        remark: "New York No. 1 Lake Park",
        txTime: "2008-03-06 05:32:38",
        status: "0",
        superiors: "1",
      },
      {
        key: "11",
        deptName: "市场部",
        age: 42,
        remark: "London No. 1 Lake Park",
        txTime: "2008-03-06 05:32:38",
        status: "0",
        superiors: "1",
      },
      {
        key: "12",
        deptName: "商务部",
        age: 32,
        txTime: "2008-03-06 05:32:38",
        status: "1",
        remark: "London No. 1 Lake Park",
        superiors: "2",
      },
      {
        key: "13",
        deptName: "财务部",
        age: 32,
        txTime: "2008-03-06 05:32:38",
        status: "1",
        remark: "London No. 1 Lake Park",
        superiors: "3",
      },
    ],
  },
  {
    id: "2",
    key: "2",
    deptName: "华南分部",
    age: 42,
    remark: "London No. 1 Lake Park",
    txTime: "2008-03-06 05:32:38",
    status: "0",
  },
  {
    id: "3",
    key: "3",
    deptName: "西北分部",
    age: 32,
    txTime: "2008-03-06 05:32:38",
    status: "1",
    remark: "London No. 1 Lake Park",
  },
  {
    id: "4",
    key: "4",
    deptName: "华北分部",
    age: 42,
    remark: "London No. 1 Lake Park",
    txTime: "2008-03-06 05:32:38",
    status: "0",
  },
  {
    id: "5",
    key: "5",
    deptName: "华西分部",
    age: 32,
    txTime: "2008-03-06 05:32:38",
    status: "1",
    remark: "London No. 1 Lake Park",
  },
  {
    id: "6",
    key: "6",
    deptName: "中南分部",
    age: 42,
    remark: "London No. 1 Lake Park",
    txTime: "2008-03-06 05:32:38",
    status: "0",
  },
  {
    id: "7",
    key: "7",
    deptName: "中西分部",
    age: 32,
    txTime: "2008-03-06 05:32:38",
    status: "1",
    remark: "London No. 1 Lake Park",
  },
];

export default [
  {
    url: "/api/depts",
    type: "post",
    response(config) {
      const { deptName, status, current, pageSize } = config.body;
      return {
        code: 200,
        msg: "success",
        data: list,
        page: {
          current,
          pageSize,
          total: list.length,
        },
      };
    },
  },
];

我的react项目是通过vite构建的，所以需要安装相应的vite的插件

yarn add vite-plugin-mock -D

然后在vite.config.js进行mockjs配置

import { defineConfig } from "vite";
import react from "@vitejs/plugin-react";
import path from "path";
import { viteMockServe } from "vite-plugin-mock";

// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    react(),
    // mock配置
    viteMockServe({
      mockPath: "mock",
      enable: true,
    }),
  ],
  resolve: {
    //第二步：配置相对路径别名
    alias: {
      "@": path.resolve("./src"), // 相对路径别名配置，使用@代替src
      "@com": path.resolve("./src/components"),
    },
  },
  server: {
    port: 3000, // 设置服务启动端口号
    host: "0.0.0.0", // 服务器ip地址，0.0.0.0代表可以访问任何ip地址，也可以
    open: true, // 设置服务启动时是否自动打开浏览器
  },
});

至此，mockjs模拟接口数据的初步配置就已经完成了，在项目便可以使用axios来获取数据了

react