ajax 数据应用场景
在真实的开发环境中，拿到了产品需求，第一件事不是逼着后台开发人员先完成，然后前端再介入开发，这样太浪费时间。
正确的做法是跟后端人员先商量好接口名称，请求参数，返回的数据格式等，前端人员造数据进入开发，与后端人员并行开发，等后端完成后再接入正式接口。
通常的做法是自己造json数据。但是这种方式也有一些问题。
1.需要安装apache或nginx等容器才行。
2.造个列表页数据很麻烦，很啰嗦。
3.格式容易写错，比如键忘了加引号或者打了个单引号，比如多了反斜杠。。。。。
4.路径不能写成正式接口名称，导致后期还得改好多地方。
5.跨域问题。
mock.js
mock.js不用装任何容器，完全在前端就可以帮我们模拟超真实的接口数据，真的是非常的方便！
http://www.tuicool.com/articles/N7Rjie3
看一下例子吧。不过需要自己安装 mockjs：
npm install mockjs
ajax测试用例：
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import $ from 'jquery';
import Mock from 'mockjs';
class UserList extends Component {
constructor(props) {
super(props);
this.state = { username: '', age: '' };
}
//组件加载完毕后执行
componentDidMount() {
$.getJSON(this.props.url, function (res) {
this.setState({
username: res['myName'],
age: res['myAge']
});
}.bind(this));
}
render() {
return (
<div>
{this.state.username}==={this.state.age}
</div>
);
}
}
//------------------------------------Mock------------------------------------
//造数据
// @name：会自动拼接字符串造人名,非常便利！
// |1-100：表示这个范围的随机整数，121表示是数字类型，只要随便给一个数字就ok
Mock.mock('http://ajax.data.com', {
'myName': 'zhangwei',
'myAge|1-100': 121
});
//----------------------------------------------------------------------------
ReactDOM.render(
<UserList url="http://ajax.data.com" />, document.getElementById('app')
);