umi mock数据请求

一、自己模拟数据

在mock目录下新建一个user.ts文件，模拟一个用户信息的数据

export default{
    'GET /api/users':{
        name:'tom',
        age:18
    },
}

发送网络请求，这里我用的是umi内置的request

import { request } from 'umi';

export default function IndexPage() {

  const getUser = () =>{
    request('/api/users').then(res => {
      console.log(res)
    })
  }
  return (
    <div>
      <button onClick={getUser}>用户信息</button>
    </div>
  );
}

最后在控制台可以看到数据成功获取

二、使用mockjs库获取大量数据

export default{
    'GET /api/tags': mockjs.mock({
        'list|100': [{ name: '@city', 'value|1-100': 50, 'type|0-2': 1 }],
    }),
}

这里是参照umi官方文档给的示例，如果想要别的数据，可以去mockjs官方文档里按照要求进行相应设置修改

import { request } from 'umi';

export default function IndexPage() {

  const getMock = () =>{
    request('/api/tags').then(res => {
      console.log(res)
    })
  }
  return (
    <div>
      <button onClick={getMock}>mock数据</button>
    </div>
  );
}

最后获取到100条城市数据信息

mockjs官方文档示例

如获取Email数据

export default{
    'GET /api/tags': mockjs.mock({
        'list|100': [{ name: '@email', 'value|1-100': 50, 'type|0-2': 1 }],
    }),
}