ant design pro调接口

最新推荐文章于 2025-10-06 02:20:20 发布

原创最新推荐文章于 2025-10-06 02:20:20 发布 · 2.3k 阅读

4 ·

CC 4.0 BY-SA版权

文章标签：

#ant design pro #调接口

本文详细介绍了Ant Design Pro中从View层到反向代理的接口调用过程。在View层，通过connect连接Model层并使用dispatch调用Model层的异步方法。Model层定义了namespace和effects，通过getDictType接口与Api接口层交互。Api接口层设置反向代理，而在反向代理配置中，将http://192.168.1.21:8080映射为/aaa路径。

View层<===Model层<===Api 接口层<===反向代理
**

View层

使用connect链接model层
调用dispatch获取 add 下异步 Kan方法（Kan是设置在Model层的方法）
使用payload传递请求参数
then会返回你所请求的值
使用Setstate放入state
在需要的地方遍历输出

import React from 'react';
import { Breadcrumb, Table, Row, Col, DatePicker, Button, Form, Select } from 'antd';
import { connect } from 'dva';

const { Option } = Select;

@Form.create()//使用from表单时 需要添加

@connect(({add})=>({
  add
}))

class Examine extends React.Component {
  constructor(props){
    super(props);
    this.state={
      list:[],
    }
  }

  componentDidMount(){
    const { dispatch } = this.props;
    dispatch({
      type: 'add/Kan',
      payload: {
       code:"022"
      },
    }).then((res)=>{
      console.log(res,"我是请求数据");
      this.setState({
        list:res
      })
    })
  }
  render() {
    return (
      <div>
        <Form style={{ backgroundColor: "#fff", paddingTop: "30px", marginTop: "20px" }}>
          <Row>
            <Col span={5}>
              <Form.Item label="部门">
                {getFieldDecorator('departmentNum', {
                  rules: [{ required: true, message: 'Please select your gender!' }],
                })(
                  <Select placeholder="选择">
                    {this.state.list.map((Item, index, array) => {
                      return <Option key={index} value={Item.departmentNo}>{Item.departmentNo}</Option>
                    })}
                  </Select>
                )}
              </Form.Item>
            </Col>
          </Row>
        </Form>

      </div>
    )
  }
}
export default Examine;

Model层

**
namespace是数据层的命名此Model层名为add，，对应View层的第2步。
先异步effects再同步reducers。
import { getDictType } from ‘@/services/api’; 是调用对应api链接

import { routerRedux } from 'dva/router';
import { stringify } from 'qs';
import { getDictType } from '@/services/api';
import { setAuthority } from '@/utils/authority';
import { getPageQuery } from '@/utils/utils';
import { reloadAuthorized } from '@/utils/Authorized';

export default {
    namespace: 'add',

    state: {
        status: undefined,
    },
    effects: {
        //查询状态 传022
        *Kan({ payload }, { call, put }) {
            const response = yield call(getDictType, payload);
            yield put({ type: 'save', payload: { ...response } });
            return response;//return是将数据回调 在.then中可获取回调的数据并进行操作，但是这会使页面看起来不规范，所以一般都是在const response = yield call(getDictType, payload);下直接对response进行数据操作
        },
    },
    reducers: {
        save(state, { payload }) {
            return {
                ...state,//防止覆盖其他reducers函数返回的state
                ...payload,
            };
        },
    },
}

Api 接口层

**
/aaa为反向代理

import { stringify } from 'qs';
import request from '@/utils/request';

//查询状态 传022
export async function getDictType(params) {
  return request(`/aaa/dict/getDictType`, {
    method: 'POST',
    data: {
      ...params,
    },
  });
}

反向代理

**
在ant pro中，此操作在config.js中。将http://192.168.1.21:8080赋值给/aaa。
/aaa不是固定的（根据自己的需求改写，但是必须和接口层一样）。

proxy: {
    '/aaa': {
      target: 'http://192.xxx.xx.xx:8080',
      changeOrigin: true,
      pathRewrite: { '^/aaa': '' },
    },
  },