19.首页异步数据的获取

1.我们在public文件夹下的api文件夹下新建一个json文件，home.json

2.在这里面我们将home页面中的数据存放进来，home.json中的代码

{"success":true,"data":{"articleList": [{"id": 1,"title": "男人离不开的，往往是“不好惹”的女人","desc": "幸福，大概就是，你想要靠近的那个人，永远都不会推开你。不管他忙与不忙，只要你一回头，就能看见他的样子。 受委屈的时候，他会各种讨好你，遇到麻烦事... "},{"id": 2,"title": "男人离不开的，往往是“不好惹”的女人","desc": "幸福，大概就是，你想要靠近的那个人，永远都不会推开你。不管他忙与不忙，只要你一回头，就能看见他的样子。 受委屈的时候，他会各种讨好你，遇到麻烦事... "} ],"recommedList": [{"id": 1,"imgUrl":"http://cdn2.jianshu.io/assets/web/banner-s-club-aa8bdf19f8cf729a759da42e4a96f366.png"},{"id": 2,"imgUrl":"http://cdn2.jianshu.io/assets/web/banner-s-7-1a0222c91694a1f38e610be4bf9669be.png"},{"id": 3,"imgUrl":"http://cdn2.jianshu.io/assets/web/banner-s-5-4ba25cf5041931a0ed2062828b4064cb.png"},{"id": 4,"imgUrl":"http://cdn2.jianshu.io/assets/web/banner-s-6-c4d6335bfd688f2ca1115b42b04c28a7.png"  }]}
}

3.在reducer中，将数据清除，保留空数组
4.我们在home目录下的index中，去获取ajax
5.我们打印一下res的data下的data
6.在home的index下，引入axios，来实现异步请求
7.通过 componentDidMount接收ajax异步数据

 //通过 componentDidMount接收ajax异步数据componentDidMount(){axios.get('/api/home.json').then((res) => {const result = res.data.data;const action = {type: 'change_home_data',articleList: result.articleList,recommedList:result.recommedList}//在这里调用 changeHomeData方法，并且将action传递进来this.props.changeHomeData(action);})}
}
const mapDispatch = (dispatch) => ({//定义一个方法 changeHomeData来派发action，将上面传递进来的action派发给storechangeHomeData(action) {dispatch(action);}
})
export default connect(null, mapDispatch)(Home);

8.这里派发的action，在store中可以接收到，在home目录下的reducer中

import { fromJS } from 'immutable';
const defaultState = fromJS({articleList: [],recommedList: []
})
export default (state = defaultState, action) => {
//判断action的类型，然后执行相应的操作switch (action.type) {case 'change_home_data':return state.merge({articleList: fromJS(action.articleList),recommedList: fromJS(action.recommedList),})default:return state;}}

结果：
9.当我们在json文件中对数据进行，修改，在页面也相应改变：

19.首页异步数据的获取相关推荐

matlab 获取雅虎数据,pandas获取雅虎金融数据
pandas.jpg 首先,强烈推荐关注Dr. Fish, 每篇文章都很有深度.因为受到她<用Python浅析股票数据>文章的启发,所以分享下最近几天学习获取股票交易历史数据的总结. 首先 ...
vue尚品汇商城项目-day03【vue插件-19.mockjs模拟数据（开发Home首页当中的ListContainer组件与Floor组件）】
文章目录 19.mockjs模拟数据(开发Home首页当中的ListContainer组件与Floor组件) 本人其他相关文章链接 19.mockjs模拟数据(开发Home首页当中的ListConta ...
Kotlin项目实战之手机影音---主界面tab切换、home界面适配、获得首页网络数据
主界面tab切换: 添加点击事件: 接下来需要处理一下主界面TAB的切换了,这里先添加BottomBar的监听事件: class MainActivity : BaseActivity(), Tool ...
简单爬取微博评论详细解析，学习爬取ajax异步数据交换动态网页
爬取微博评论详细解析,学习爬取ajax异步数据交换动态网页 1.什么是ajax异步数据交换网页 2.用到的工具模块和简单解释 3.网页内容解析 4.代码实现及解释 1.什么是ajax异步数据交换网页 ...
Spark Machine Learning 03 Spark上数据的获取、处理与准备
Chap 03 Spark上数据的获取处理 Spark上数据的获取.处理与准备 MovieStream,数据包括网站提供的电影数据.用户的服务信息数据以及行为数据. 这些数据涉及电影和相关内容(比如标 ...
python量化投资必背代码-量化投资：用Python实现金融数据的获取与整理
小编说:数据可以说是量化投资的根本,一切投资策略都是建立在数据基础上的.本文以优矿网为例,带领大家用Python实现金融数据的获取与整理. 本文选自<Python与量化投资:从基础到实战> ...
flask+sqlite3+echarts3+ajax 异步数据加载
结构: /www | |-- /static |....|-- jquery-3.1.1.js |....|-- echarts.js(echarts3是单文件!!) | |-- /templates ...
抓取异步数据（AJAX）笔记
抓取异步数据(AJAX) 数据在XHR中提取结果完整代码注意事项数据在XHR中可以看到,单击XHR按钮后,左侧的列表只显示了一个名为data的URL,很明显,这是获取数据的路由名字,在右侧的 ...
html中的异步请求数据格式,解决layui中table异步数据请求不支持自定义返回数据格式的问题...
使用版本 layui-v2.3.0 修改: 打开layui中table.js源码在 Class.prototype.pullData 这个方法定义内部 //获得数据 Class.prototype. ...
js异步请求php数据,原生JS发送异步数据请求实例详解
这篇文章主要为大家详细介绍了原生JS发送异步数据请求的相关资料,具有一定的参考价值,感兴趣的小伙伴们可以参考一下在做项目的时候,有时候需要用到异步数据请求,但是如果这个时候没有框架的依赖,就需要用到 ...

19.首页异步数据的获取

19.首页异步数据的获取相关推荐

最新文章

热门文章