fetch 是 XMLHttpRequest 的最新替代技术，它的主要方法就是 fetch() 方法。
相关资料：
fetch网址：阮一峰；http://javascript.ruanyifeng.com/bom/ajax.html#toc27
http://blog.csdn.net/u014410695/article/details/51017088
url ：http://blog.csdn.net/u014410695/article/details/51017088
在项目中使用：
home.js 是首页， 而 NavList 是轮播图的组件，现在要实现的就是在 home.js 中把首页的数据拿到并拆分出来，把轮播图这一块的数据传递给 NavList 组件， NavList 拿到数据并渲染。
1、home.js 拆分数据
一般数据拆分是写在 componentDidMount() 中，该方法是在 render() 方法成功调用并且真实的 dom 已经被渲染后进行。
componentDidMount() {
/* var myHeaders = new Header();
myHeaders.append("Content-Type", "text/plain");
myHeaders.append("Content-Length", context.length.toString());
myHeaders.append("X-Custom-Header", "ProcessThisImmediately");
var myInit = {
method: 'POST',
headers: myHeaders,
mode: 'cors',
cache: 'default'
}; */ // 头部信息，解决兼容性问题
var url = "................................."; // 接口url
fetch(url).then(
function (res) {
if (res.ok) {
return res.json()
} else {
{this.LogError(res)}
}
}
).then(function (json) {
if (json.code == "200") { // 判断请求是否正确
return json.datas
}
}).then(function (datas) {
for (var i=0; i<datas.length; i++) {
if (datas[i].type == "adv_list") { // 取出轮播图的数据
return datas[i].ietm_data
}
}
}).then( (e) => {
console.log("props111=====" + e );
this.setState({ // setState 将数据塞在 state 中以便在组件间进行数据传递
slideList:e
});
});
}
LogError(res) {
console.error('服务器繁忙,请稍后重试; \r\nCode:' + res.status)
}
2、数据传递
home.js 在 constructor 中初始化 slideList 数组，以便后续来承载需要传输给子组件的数据。
constructor(){
super();
this.state = {
slideList:[], // 初始化 slideList［］
}
}
前面在第一步也讲到了，把数据 setState 到 slideList 中。
render() {
return (
<div>
<Nav />
<NavList datas={this.state.slideList} /> // 在 render 数组的时候将数据传输进去
<GridView />
</div>
);
}
3、子组件接收数据并渲染组件
NavList 中 继承父组件的 props：
constructor(props) {
super(props);
console.log("props=====" + props); // 这里打印时已经确定数据传输过来了
this.state = { // 无关
current: 1,
};
};
渲染组件，我这里用的是 antd mobile 的轮播图：
render() {
const settings = {
//是否显示面板指示器
dots: true,
//是否自动切换
autoplay: true,
//是否循环播放
infinite: true,
//手动设置当前显示的索引
selectedIndex: this.state.current,
beforeChange: this.beforeSlide,
afterChange: this.slideTo,
};
return (
<div>
<Carousel {...settings}>
{
this.props.datas.map(function(el){ // map遍历 渲染
return <Flex
justify="center"
className={styles.flex}
>
<img className={styles.image} src={el.image} />
</Flex>
})
}
</Carousel>
<WhiteSpace size="1g" />
</div>
);
}
ok，动态取值的轮播图就已经完成了。
