Todos案例对接后台接口（一）——模拟接口-json-server & 配置axios基准地址-axios.defaults.baseURL

Todos案例对接后台接口——模拟接口-json-server & 配置axios基准地址-axios.defaults.baseURL

模拟后台接口

• 安装包：

  yarn global add json-server

  • 自动生成CRUD接口

  • 启动服务

    json-server ./todos.json --port 8888

./todos.json——数据文件路径

页面模拟数据-效果

对接后台接口数据-列表展示

src/store/ActionCreator.js

export const getTodosList = (todos) => {
  return {
    type: ActionTypes.TODOS_LIST,
    todos: todos
  }
}

src/store/ActionCreator.js

import axios from 'axios'

// 实现Action，获取后台列表数据
const getTodosListAsync = () => {
  return async dispatch => {
    // 获取接口的异步结果
    let res = await axios.get('todos')
    let action = getTodosList(res.data)
    dispatch(action)
  }
}

export { getTodos }

备注

axios.get('http://localhost:8888/todos')

等价于

axios.defaults.baseURL = 'http://localhost:8888'
let res = axios.get('todos')

src/views/TodoApp.js

componentDidMount() {
  // connect方法默认会向TodoApp组件中注入dispatch方法
    // console.log(this.props)
    // 调用后台接口获取列表数据    
  this.props.dispatch(getTodos())
}