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.首页异步数据的获取的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。