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;

 

 

 

```

转载于:https://www.cnblogs.com/boye-1990/p/11464758.html