react入門系列之利用axios，mockjs實現react的異步請求

### redux中發送異步請求

- react項目中初始化數據通常在componentDidMount這個生命週期函數中進行

- 咱們沒有後臺接口，能夠使用mockjs來攔截請求。

- 這邊詳細的mockjs不作講解，你們能夠自行查看文檔。

 

### mockjs

- yarn add mockjs 安裝mockjs

- 在src目錄建立mock文件夾，建立mock.js文件

- mock.js中的地址應該和請求的地址相同

 1 import Mock from 'mockjs'
 2 let Random = Mock.Random
 3 const numebr = Random.integer(18,30)
 4 const county = Random.county(true)
 5 const name = Random.cname(true)
 6 
 7 
 8 Mock.mock('http://getTodoList',{
 9 'data':[name, county, numebr]
10 })

### 在須要請的組件中安裝axios

- yarn add axios

- 而且引入以前建立mock.js文件

- 引入axios

 1 /**
 2 * 組件就是一個須要借書的人，經過 dispatch 傳達 action （書名）給圖書管理員（store）
 3 */
 4 
 5 import React, { Component }from 'react';
 6 import { message } from "antd";
 7 import store from './store'; // 引入圖書管理員 store
 8 import AppUi from './AppUi';
 9 import mockData from './mockjs/mock';
10 import axios from 'axios'
11 // 引入action
12 import { getInputChangeValue, getAddTodoListValue, getDeletTodoListValue, initData } from './store/actionCreators'
13 // import { CHANGE_INPUT_VALUE, CHANGE_LIST_VALUE, DELETE_LIST_VALUE } from './store/actionTypes'
14 import "antd/dist/antd.css";
15 class App extends Component {
16 constructor(props){
17 super(props)
18 this.state = store.getState()
19 console.log(store.getState())
20 this.handleInputChange = this.handleInputChange.bind(this);
21 this.addTodoList = this.addTodoList.bind(this);
22 this.handleStroeChange = this.handleStroeChange.bind(this);
23 this.deletTodoList = this.deletTodoList.bind(this);
24 store.subscribe(this.handleStroeChange) // 圖書管理員會隨時通知各個借書人，圖書館書籍的變化
25 }
26 componentDidMount (){
27 // 發送異步請求
28 axios.get('http://getTodoList', {dataType: 'json'}).then(res => {
29 // 我想改的數據是list，他存放在倉庫中，因此也要經過aciton去改變它。
30 // 因此另寫一個init方法，派發action
31 this.init(res.data.data)
32 })
33 }
34 render() {
35 return (
36 <AppUi
37 inputValue = {this.state.inputValue}
38 handleInputChange = {this.handleInputChange}
39 deletTodoList = {this.deletTodoList}
40 addTodoList = {this.addTodoList}
41 list = {this.state.list}
42 />
43 )
44 }
45 handleInputChange(e) {
46 /*
47 const action = {
48 type: CHANGE_INPUT_VALUE, // 借什麼書
49 value: e.target.value
50 }
51 */
52 const action = getInputChangeValue(e.target.value)
53 store.dispatch(action); // 傳達給store
54 console.log(e.target.value)
55 }
56 // 數據初始化
57 init(data) {
58 const action = initData(data)
59 store.dispatch(action)
60 }
61 // 添加
62 addTodoList() {
63 /*
64 if (this.state.inputValue) {
65 const action = {
66 type: CHANGE_LIST_VALUE,
67 item: this.state.inputValue
68 }
69 store.dispatch(action)
70 } else {
71 message.warning('請輸入內容');
72 }
73 */
74 if (this.state.inputValue) {
75 const action = getAddTodoListValue(this.state.inputValue)
76 store.dispatch(action)
77 } else {
78 message.warning('請輸入內容');
79 }
80 }
81 // 刪除
82 deletTodoList(index) {
83 /*
84 const action = {
85 type: DELETE_LIST_VALUE,
86 value: index
87 }
88 */
89 console.log(index)
90 const action = getDeletTodoListValue(index)
91 store.dispatch(action)
92 }
93 handleStroeChange() {
94 this.setState(store.getState()) // 每當圖書館有變化的時候，圖書管理員（store）經過這個方式告訴借書人（組件）
95 }
96 }
97 
98 export default App;

 

 

 

```