Ant Design Pro如何调用接口 | Ant Design Pro渲染数据 绑定数据
Ant Design Pro我发现网上的资料好少，而且版本基本都是1.0的，我现在是2.0版本，好多地方都不一样，今天我把调用接口和渲染研究了下，分享给大家！
先看效果图：
再看下目录结构,下边代码文件的位置可以在这里看到：
如果想学习如何新建页面可以看：Ant Design Pro初探—新建页面，开始码代码：
首先新建页面Test.js 位置src/pages/Test/Test.js 内容如下：
import React, { PureComponent } from 'react';
//这里connect如果请求接口 必须要！
import { connect } from 'dva';
//import styles from './User.less'; 暂时用不到
//这块是使用connt获取数据的应该 不知道理解对不对
@connect( test => ({ test, loading }) => ({
//这行是把返回的数据test.data给了test
test : test.data,
loading: loading.models.list,
}))
class Test extends PureComponent {
//componentWillMount 在渲染前调用,在客户端也在服务端。
componentWillMount(){
console.log('渲染前调用');
alert("渲染前调用");
}
//componentDidMount在第一次渲染后调用，只在客户端。
componentDidMount() {
const { dispatch } = this.props;
//要传递的参数
const params = {
aa:1,
};
//分发
dispatch({
//test是命名空间 fetch是其中的方法
type: 'test/fetch',
//这里就是上边的参数
payload: params,
});
}
render() {
//获取接口数据
const { user_name , code , url } = this.props.user;
console.log(this.props.user);
return (
<div>
<h2>HELLO WORD!</h2>
<h2>用户名：{user_name}</h2>
<h2>用户名：{code}</h2>
<a href={ url } target="_blank">博客链接：{ url }</a>
</div>
)
}
}
export default Test;页面就ok了！ 下边开始建立models具体什么位置 随你放，这个是根据命名空间来使用的！ 位置看自己需求了，我的是在 src/models/test.js
内容如下：
//这块的queryTest是下边的方法的实现，有几个写几个用，分割哦！
import { queryTest } from '@/services/api';
export default {
namespace: 'test',
state: {
//用来保存数据
data : [],
},
effects: {
//方法实现
//payload 请求的参数
*fetch({ payload }, { call, put }) {
const response = yield call(queryTest, payload);
yield put({
//回调的方法 save
type: 'save',
payload: response,
});
},
},
reducers: {
//这块应该是回调
save(state, action) {
return {
...state,
data: action.payload,
};
},
},
};models ok下边开始建立真实请求，这个文件我就不新建了，我直接用自带的src/pages/service/api.js的文件了
直接在最后一行添加如下内容：
//get请求
export async function queryTest(params) {
//接口地址和参数应该可以一目了然了吧！
return request(`/server/api/getUserName?${stringify(params)}`);
}
//post请求
//export async function queryTest1(params) {
// return request('/server/api/getUserName', {
// method: 'POST',
// body: params,
// });
//}最终会请求道 https://www.liangjucai.com/api/getUserName接口中
接口数据如下：
{"user_name":"梁巨才博客","code":200,"url":"https:\/\/www.liangjucai.com"}如果还不会切换域名接口的可以看上篇文章Ant Design Pro代理接口配置，接口域名更改
ok都搞定了，看看效果！
你学会了吗？如果理解有错误！可以给我留言哦！！
Ant Design Pro如何调用接口 | Ant Design Pro渲染数据 绑定数据
