【React】Umijs和TypeScript实现mock和反向代理

在UmiJS中使用TypeScript实现Mock数据和反向代理，你可以通过以下步骤进行配置：

1. 安装依赖：

yarn add @umijs/plugin-request mockjs -D

2. 配置src/config.ts或src/global.ts添加Mock配置：

import { defineConfig } from 'umi';
 
export default defineConfig({
  mock: {
    exclude: /^(?!.*\/api\/).*$/, // 排除不需要mock的路径
  },
  // 配置请求代理
  proxy: {
    '/api/': {
      target: 'http://your-api-server.com',
      changeOrigin: true,
      pathRewrite: { '^/api/': '' },
    },
  },
});

3. 创建Mock文件，例如src/mock/api.ts：

import mockjs from 'mockjs';
 
// Mock数据示例
const data = mockjs.mock({
  'items|10': [{
    id: '@id',
    name: '@name',
    'age|18-30': 1,
  }],
});
 
export default {
  'GET /api/data': (_, res) => {
    res.send({
      data: data.items,
    });
  },
};

4. 使用request插件发送请求，例如在src/pages/index.tsx中：

import React from 'react';
import { useRequest } from '@umijs/plugin-request';
 
export default () => {
  const { data, error, loading } = useRequest('/api/data');
 
  if (error) {
    return <div>Failed to load data</div>;
  }
 
  if (loading) {
    return <div>Loading...</div>;
  }
 
  return (
    <div>
      <h1>Data List</h1>
      <ul>
        {data.map((item) => (
          <li key={item.id}>
            {item.name} - {item.age}
          </li>
        ))}
      </ul>
    </div>
  );
};

确保启动UmiJS开发服务器时，Mock功能和代理配置均已生效。