react入门系列之利用axios，mockjs实现react的异步请求

redux中发送异步请求

• react项目中初始化数据一般在componentDidMount这个生命周期函数中进行
• 我们没有后台接口，可以使用mockjs来拦截请求。
• 这边详细的mockjs不做讲解，大家可以自行查看文档。

mockjs

• yarn add mockjs 安装mockjs
• 在src目录创建mock文件夹，创建mock.js文件
• mock.js中的地址应该和请求的地址相同

import Mock from 'mockjs'
let Random = Mock.Random
const numebr = Random.integer(18,30)
const county = Random.county(true)
const name = Random.cname(true)

Mock.mock('http://getTodoList',{
    'data':[name, county, numebr]
})

在需要请的组件中安装axios

• yarn add axios
• 并且引入之前创建mock.js文件
• 引入axios

/**
 * 组件就是一个需要借书的人，通过 dispatch 传达 action （书名）给图书管理员（store）
 */

import React, { Component }from 'react';
import { message } from "antd";
import store from './store'; // 引入图书管理员 store
import AppUi from './AppUi';
import mockData from './mockjs/mock';
import axios from 'axios'
// 引入action
import { getInputChangeValue, getAddTodoListValue, getDeletTodoListValue, initData } from './store/actionCreators'
// import { CHANGE_INPUT_VALUE, CHANGE_LIST_VALUE, DELETE_LIST_VALUE } from './store/actionTypes'
import "antd/dist/antd.css";
class App extends Component {
  constructor(props){
    super(props)
    this.state = store.getState()
    console.log(store.getState())
    this.handleInputChange = this.handleInputChange.bind(this);
    this.addTodoList = this.addTodoList.bind(this);
    this.handleStroeChange = this.handleStroeChange.bind(this);
    this.deletTodoList = this.deletTodoList.bind(this);
    store.subscribe(this.handleStroeChange) // 图书管理员会随时通知各个借书人，图书馆书籍的变化
  }
  componentDidMount (){
    // 发送异步请求
    axios.get('http://getTodoList', {dataType: 'json'}).then(res => {
      // 我想改的数据是list，他存放在仓库中，所以也要通过aciton去改变它。
      // 所以另写一个init方法，派发action
      this.init(res.data.data)
    })
  }
  render() {
    return (
      <AppUi
      inputValue = {this.state.inputValue}
      handleInputChange = {this.handleInputChange}
      deletTodoList = {this.deletTodoList}
      addTodoList = {this.addTodoList}
      list = {this.state.list}
      />
    )
  }
  handleInputChange(e) {
    /*
    const action = {
      type: CHANGE_INPUT_VALUE, // 借什么书
      value: e.target.value
    }
    */
    const action = getInputChangeValue(e.target.value)
    store.dispatch(action); // 传达给store
    console.log(e.target.value)
  }
  // 数据初始化
  init(data) {
    const action = initData(data)
    store.dispatch(action)
  }
  // 添加
  addTodoList() {
    /*
    if (this.state.inputValue) {
      const action = {
        type: CHANGE_LIST_VALUE,
        item: this.state.inputValue
      }
      store.dispatch(action)
    } else {
      message.warning('请输入内容');
    }
    */
   if (this.state.inputValue) {
      const action = getAddTodoListValue(this.state.inputValue)
      store.dispatch(action)
   } else {
    message.warning('请输入内容');
   }
  }
  // 删除
  deletTodoList(index) {
    /*
    const action = {
      type: DELETE_LIST_VALUE,
      value: index
    }
    */
   console.log(index)
    const action = getDeletTodoListValue(index)
    store.dispatch(action)
  }
  handleStroeChange() {
    this.setState(store.getState()) // 每当图书馆有变化的时候，图书管理员（store）通过这个方式告诉借书人（组件）
  }
}

export default App;