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())
}