Umi +React + dva + Ant Design Pro 的项目学习（六) Umi的请求和Mock使用

1.Mock

• Mock是本地虚拟的数据文件，定义请求api所对应的数据内容
• Mock再umi中是默认启动的
• MOCK=none umi dev 指令启动umi可以关闭mock
• Umi 约定 /mock 文件夹下所有文件为 mock 文件。
   

2.添加Mock文件

这里不一定要取名”index“，只要再mock目录下，都会被拆解成mock文件。

这样我们就定义了 GET 请求本地/mock/users 的api时，返回后续数据。

export default {
  'GET /mock/users': [
    {
      id: 1,
      name: 'Tom',
      age: 20
    },
    {
      id: 2,
      name: 'Jack',
      age: 48
    },
    {
      id: 3,
      name: 'Alice',
      age: 25
    },
  ]
}

 

3.发送Request请求

我在用户界面中加了一个按钮，绑定了发送请求的方法：

import React from 'react';
import {Button, Space} from 'antd';
import {history, request} from 'umi';


const MyUser = () => {

  const goAdd = () => {
    history.push('/user/add');
  }

  const goEdit = () => {
    history.push('/user/edit');
  }

  const getInfo = () => {
    request('/mock/users').then(res => {
      console.log(res);
    })
  }

  return (
    <div>
      <Space>
        <Button onClick={goAdd}>Add</Button>
        <Button onClick={goEdit}>Edit</Button>
        <Button onClick={getInfo}>Info</Button>
      </Space>
    </div>
  );
};

export default MyUser;

效果：

ok，完美拿到。
 

4.异步发送Request请求

用这个方法代替getInfo就可以了，主要是用到了一个async和await前缀。

	  const getInfo_async = async ()=>{
	    const data = await request('/mock/users')
	    console.log(data)
	  }

 

5.不使用Mock的请求

1.启动时关闭mock

	$ umi dev MOCK-none

2.配置路由代理

意思是，在碰到/api开头的路由是，会自动转代理做处理，让目标

proxy: {
    '/api': {
      target: 'http://localhost:8081',
      pathRewrite: { '^/api': '' },
      changeOrigin: true
    }
  },

这里调用了我自己之前的springboot的接口进行测试。

因为用的后端是thymeleaf直接渲染，所以拿到的是html的页面，不过就是这个道理，

 

6.Mockjs工具

Mockjs 是一个mock工具，可以通过代码随机生成数据，这样就不需要我们自己手打大量测试数据了。
在mock中加上这个：

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

加了一个按钮对应这个api的请求事件，这里就不写了，直接看效果：

mock.js官网：http://mockjs.com/