React笔记_(5)_react语法4
ajax 数据应用场景
在真实的开发环境中,拿到了产品需求,第一件事不是逼着后台开发人员先完成,然后前端再介入开发,这样太浪费时间。
正确的做法是跟后端人员先商量好接口名称,请求参数,返回的数据格式等,前端人员造数据进入开发,与后端人员并行开发,等后端完成后再接入正式接口。
通常的做法是自己造json数据。但是这种方式也有一些问题。
1.需要安装apache或nginx等容器才行。
2.造个列表页数据很麻烦,很啰嗦。
3.格式容易写错,比如键忘了加引号或者打了个单引号,比如多了反斜杠。。。。。
4.路径不能写成正式接口名称,导致后期还得改好多地方。
5.跨域问题。
mock.js
mock.js不用装任何容器,完全在前端就可以帮我们模拟超真实的接口数据,真的是非常的方便!
http://www.tuicool.com/articles/N7Rjie3
看一下例子吧。不过需要自己安装 mockjs:
npm install mockjs
ajax测试用例:

1 import React, { Component } from 'react'; 2 import ReactDOM from 'react-dom'; 3 import $ from 'jquery'; 4 import Mock from 'mockjs'; 5 class UserList extends Component { 6 constructor(props) { 7 super(props); 8 this.state = { username: '', age: '' }; 9 } 10 //组件加载完毕后执行 11 componentDidMount() { 12 $.getJSON(this.props.url, function (res) { 13 this.setState({ 14 username: res['myName'], 15 age: res['myAge'] 16 }); 17 }.bind(this)); 18 } 19 render() { 20 return ( 21 <div> 22 {this.state.username}==={this.state.age} 23 </div> 24 ); 25 } 26 } 27 28 //------------------------------------Mock------------------------------------ 29 //造数据 30 // @name:会自动拼接字符串造人名,非常便利! 31 // |1-100:表示这个范围的随机整数,121表示是数字类型,只要随便给一个数字就ok 32 Mock.mock('http://ajax.data.com', { 33 'myName': 'zhangwei', 34 'myAge|1-100': 121 35 }); 36 //---------------------------------------------------------------------------- 37 38 ReactDOM.render( 39 <UserList url="http://ajax.data.com" />, document.getElementById('app') 40 );
如果觉得我的文章对您有用,请随意打赏。您的支持将鼓励我继续创作!


作者:风来风往风伤
出处:http://www.cnblogs.com/amwuau/
本文版权归作者和博客园共有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文链接,否则保留追究法律责任的权利。