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渲染数据 绑定数据
喜欢(13)