详细参考:DvaJS
调用 api 接口
以调用cnode
接口为例子
第一步:编辑.webpackrc
文件
添加:
"proxy": {
"/apis": {
"target": "目标 API 接口",
"changeOrigin": true,
"pathRewrite": {"^/apis": ""} // 可省...
}
}
配置代理,调通接口
第二步:编辑services/example.js
文件
import request from '../utils/request';
const pox = "/apis/"
export function testCnode() {
return request(pox + '/api/v1/topics');
}
第三步:调用接口
1. 在组件中使用接口
import * as apis from '../services/example'
apis.testCnode().then((res) => {
console.log(res)
})
2. 在model
中使用接口
以
import * as apis from '../services/example'
export default {
namespace: 'indexPage',
state: {
cnodeData: []
},
effects: {
*testCnode(action, {put, call}) {
let rel = yield call(apis.testCnode)
if(rel.data) {
yield put({
type: 'setCnodeDataList',
data: rel.data.data
})
}
}
},
reducers: {
setCnodeDataList(state, payload) {
return {
...state,
cnodeData: payload.data
}
}
},
}
首先导入import * as apis from '../services/example'
,
在effects
异步中使用call(apis.testCnode)
调用接口数据,
找到详细数据在put({data: 详细数据})
使用,作为put({type: 对应的事件})
的payload
值传给reducers
中对应的事件
在组件中使用mapStateToProps
就可以获取数据了
mock 本地数据
第一步:定义接口
在mock
文件夹下,创建testMock.js
文件,编辑文件:
module.exports={
"GET /api/mockdata": (req, res) => {
console.log(req)
res.send({
msg: '登录成功' // 为要 mock 的数据
})
}
}
第二步:注册接口
找到.roadHogrc.mock.js
文件,编辑:
export default {
...require("./mock/testMock")
};
第三步:请求接口
在services/example.js
中请求接口
export function mockdata() {
return request("api/mockdata");
}
第四步:同上使用接口
…