react mockjs模拟数据请求

直接通过dva new dva-quickstart直接创建项目

首先引入mockjs

npm install mockjs

先实现一个简单GET请求
在目录的最外层有一个mock文件夹，生成随机数据都放在这里
创建一个cs.js和data.js两个文件
data.js里放的是默认数据

data.js
export default[
    {
        id:1,
        name:'a',
        age:13,
        type:1,
    },
    {
        id:2,
        name:'b',
        age:22,
        type:1,
    },
    {
        id:3,
        name:'c',
        age:33,
        type:1,
    }
]

cs.js中放的是模拟接口，写一个GET请求，没有参数，直接返回所有数据

import data from './data'

export default {
    'GET /api/info': {
        message: '201',
        data,
    },
}

创建一个简单显示js文件，index.js,我比较喜欢用class组件，在componentWillMount生命周期中，进行请求，获取数据，然后在return中遍历数据，显示 li 。 export default connect导出组件。

import React, { Component } from 'react'
import { connect } from 'dva';

class index extends Component {

componentWillMount() {
    const { dispatch } = this.props
    dispatch({
        type: 'cs/fetch',
    })
}
 render() {
  const { cs: { list } } = this.props
 return (
            <div>
                <ul>
                    {list.length > 0 ? list.map(item => (
                        <li key={item.id}>{item.name + " " + item.age} </li>
                    )) : ''}
                </ul>
            </div>
    )
 }
}
export default connect(({ cs }) => ({
    cs,
}))(index);

然后在services文件中创建一个cs.js文件

import request from '../utils/request';

export function query() {
    return request('/api/info', {
        method: 'GET'
    });
}

接着model文件中创建一个cs.js文件

import {query} from '../services/cs'

export default {

    namespace: 'cs',

    state: {
        list: []
    },
    
  effects: {
    *fetch({ payload }, { call, put }) {  // eslint-disable-line
        const res = yield call(query,payload)
        const {data} = res
        yield put({ type: 'save',payload:{data }});
    },
     reducers: {
    save(state, action) {
        return { ...state, list: action.payload.data };
    },
 },

};

修改.roadhogrc.mock.js配置文件

const mock = {}
require('fs').readdirSync(require('path').join(__dirname + '/mock')).forEach(function(file) {
    Object.assign(mock, require('./mock/' + file))
})
module.exports = mock

最外层的index.js文件中引入model

app.model(require('./models/cs').default);

这样简单的一个GET请求就完成了

再来完成一个账号登录的POST请求
index.js中的显示部分，我直接使用antd的Form组件

	const layout = {
        labelCol: { span: 8 },
        wrapperCol: { span: 16 },
    };
    const tailLayout = {
        wrapperCol: { offset: 8, span: 16 },
    };
    
	<Form
        {...layout}
         name="basic"
         onFinish={this.onFinish}
      >
     <Form.Item
            label="Username"
            name="username"
            rules={[{ required: true, message: 'Please input your username!' }]}
           >
          <Input />
           </Form.Item>

          <Form.Item
               label="Password"
              name="password"
              rules={[{ required: true, message: 'Please input your password!' }]}
               >
              <Input.Password />
       	 </Form.Item>


          <Form.Item {...tailLayout}>
              <Button type="primary" htmlType="submit">
                   Submit
               </Button>
           </Form.Item>
  </Form>

在onFinish中，发送请求

 onFinish = (values) => {
        const { dispatch } = this.props
        dispatch({
            type: 'cs/login',
            payload: {
                ...values
            },
            success: () => {
                message.success("登录成功")
            },
            error: () => {
                message.error("登录失败")
            }
        })
    }

在services文件中的cs.js文件加入

export function login(param) {
    return request('/api/login', {
        method: 'POST',
        body:param
    });
}

在models文件中的cs.js文件加入

*login({payload,success,error},{call}){
            const res = yield call(login,payload)
            if(res.message == 500){
                error && error()
            }else{
                success && success()
            }
        },

在mock文件中的cs.js文件加入

'POST /api/login': (req, res) => {
        const { password, username } = req.body;
        if (password === '123' && username === 'admin') {
            res.send({
                message: '201',
                data:'登录成功'
            });
            return;
        }
        res.send({
            message: '500',
            data:'登录失败'
        });
    },

这样一个完整的POST的模拟登录请求就完成了

完整项目下载路径如下
https://download.csdn.net/download/qq_40492771/12682918
上传项目的node_modules文件我删，先npm install一下