create-react-app结合dvajs2-使用axios封装请求方法

接着上一篇, 搭建基本项目

封装请求方法

在src目录下新建request文件夹, 导入

axios

并分装请求方法,

不会的可以参考react使用axios封装请求方法

新建services层

在services中新建service.js文件, 在这个文件中统一管理请求

import $axios from \'../request\'const getCodeUrl = $axios.baseUrl + \'verCode/getCode\'// 获取验证码export const getCode = async params => $axios.postRequest(getCodeUrl, params)

修改

model

修改

page1.js

文件中引入:

import { getCode } from \'../services/service\'

在

effects

中添加

* getCode({ payload }, { call, put }) {const res = yield call(getCode, payload)return res}

如果需要保存到state中, 就要先在reducers中定义好方法, 在用调用

put

方法就行了, 和

count

改变的方法一样!

这里就不再写了

最后的

model\\page1.js

是:

import { getCode } from \'../services/service\'const initState = { count: 1 }export default {namespace: \'page1\',state: initState,subscriptions: {},effects: {* changeCount({ payload }, { put }) {yield put({ type: \"countIncrease\", payload })},* getCode({ payload }, { call, put }) {const res = yield call(getCode, payload)return res}},reducers: {countIncrease(state, { payload }) {return { ...state, count: state.count + payload }}}}

页面中调用

在

views\\page1.jsx

中添加按钮

<button onClick={this.sendRequestHandler.bind(this)}>发送请求</button>

注册方法

// 发送请求的方法async sendRequestHandler() {const { dispatch } = this.propsconst res = await dispatch({type: \"page1/getCode\",payload: {phone: \"10000\" //  这里应该是一个手机号}})console.log(res)}

此时点击发送按钮,