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)}
此时点击发送按钮,
res
就是后端接口返回的数据了
请求异常时无法发送下次请求(请求发生阻塞)的解决方法