前言：pro4的主题ui确实是美观，但是它涉及也是挺多前端比较多的知识点，而且baidu上面也是各种答案，各种版本，经过各种尝试终于开启了ant-d的网络请求，这个过程是如此的困难啊，记录一下破解的秘诀

让pro4mock和api数据兼容访问

• http://www.antdesignapi.com:8090/service/antdapi/testmyapi //这个是我本地搭建的开放的api接口的格式
• config/config.js中开启api访问

proxy: {
    '/service/antdapi': {
      target: 'http://www.antdesignapi.com:8090/',
      changeOrigin: true,
      pathRewrite: { '^/server': '' },
    },
  },

请求的过程以profilebase为案例

• index.js没有改动

import { Badge, Card, Descriptions, Divider, Table } from 'antd';
import React, { Component } from 'react';
import { PageHeaderWrapper } from '@ant-design/pro-layout';
import { connect } from 'dva';
import styles from './style.less';
import {log} from "lodash-decorators/utils";

const progressColumns = [
  {
    title: '时间',
    dataIndex: 'time',
    key: 'time',
  },
  {
    title: '当前进度',
    dataIndex: 'rate',
    key: 'rate',
  },
  {
    title: '状态',
    dataIndex: 'status',
    key: 'status',
    render: text => {
      if (text === 'success') {
        return <Badge status="success" text="成功" />;
      }

      return <Badge status="processing" text="进行中" />;
    },
  },
  {
    title: '操作员ID',
    dataIndex: 'operator',
    key: 'operator',
  },
  {
    title: '耗时',
    dataIndex: 'cost',
    key: 'cost',
  },
];

class ProfileBasic extends Component {
  componentDidMount() {
    const { dispatch } = this.props;
    console.log(dispatch)
    dispatch({
      type: 'profileBasic/fetchBasic',
    });
  }

  render() {
    const { profileBasic, loading } = this.props;
    const { basicGoods, basicProgress } = profileBasic;
    let goodsData = [];

    if (basicGoods.length) {
      let num = 0;
      let amount = 0;
      basicGoods.forEach(item => {
        num += Number(item.num);
        amount += Number(item.amount);
      });
      goodsData = basicGoods.concat({
        id: '总计',
        num,
        amount,
      });
    }

    const renderContent = (value, row, index) => {
      const obj = {
        children: value,
        props: {},
      };

      if (index === basicGoods.length) {
        obj.props.colSpan = 0;
      }

      return obj;
    };

    const goodsColumns = [
      {
        title: '商品编号',
        dataIndex: 'id',
        key: 'id',
        render: (text, row, index) => {
          if (index < basicGoods.length) {
            return <a href="">{text}</a>;
          }

          return {
            children: (
              <span
                style={{
                  fontWeight: 600,
                }}
              >
                总计
              </span>
            ),
            props: {
              colSpan: 4,
            },
          };
        },
      },
      {
        title: '商品名称',
        dataIndex: 'name',
        key: 'name',
        render: renderContent,
      },
      {
        title: '商品条码',
        dataIndex: 'barcode',
        key: 'barcode',
        render: renderContent,
      },
      {
        title: '单价',
        dataIndex: 'price',
        key: 'price',
        align: 'right',
        render: renderContent,
      },
      {
        title: '数量（件）',
        dataIndex: 'num',
        key: 'num',
        align: 'right',
        render: (text, row, index) => {
          if (index < basicGoods.length) {
            return text;
          }

          return (
            <span
              style={{
                fontWeight: 600,
              }}
            >
              {text}
            </span>
          );
        },
      },
      {
        title: '金额',
        dataIndex: 'amount',
        key: 'amount',
        align: 'right',
        render: (text, row, index) => {
          if (index < basicGoods.length) {
            return text;
          }

          return (
            <span
              style={{
                fontWeight: 600,
              }}
            >
              {text}
            </span>
          );
        },
      },
    ];
    return (
      <PageHeaderWrapper>
        <Card bordered={false}>
          <Descriptions
            title="退款申请"
            style={{
              marginBottom: 32,
            }}
          >
            <Descriptions.Item label="取货单号">1000000000</Descriptions.Item>
            <Descriptions.Item label="状态">已取货</Descriptions.Item>
            <Descriptions.Item label="销售单号">1234123421</Descriptions.Item>
            <Descriptions.Item label="子订单">3214321432</Descriptions.Item>
          </Descriptions>
          <Divider
            style={{
              marginBottom: 32,
            }}
          />
          <Descriptions
            title="用户信息"
            style={{
              marginBottom: 32,
            }}
          >
            <Descriptions.Item label="用户姓名">付小小</Descriptions.Item>
            <Descriptions.Item label="联系电话">18100000000</Descriptions.Item>
            <Descriptions.Item label="常用快递">菜鸟仓储</Descriptions.Item>
            <Descriptions.Item label="取货地址">浙江省杭州市西湖区万塘路18号</Descriptions.Item>
            <Descriptions.Item label="备注">无</Descriptions.Item>
          </Descriptions>
          <Divider
            style={{
              marginBottom: 32,
            }}
          />
          <div className={styles.title}>退货商品</div>
          <Table
            style={{
              marginBottom: 24,
            }}
            pagination={false}
            loading={loading}
            dataSource={goodsData}
            columns={goodsColumns}
            rowKey="id"
          />
          <div className={styles.title}>退货进度</div>
          <Table
            style={{
              marginBottom: 16,
            }}
            pagination={false}
            loading={loading}
            dataSource={basicProgress}
            columns={progressColumns}
          />
        </Card>
      </PageHeaderWrapper>
    );
  }
}

export default connect(({ profileBasic, loading }) => (
  {
  profileBasic,
  loading: loading.effects['profileBasic/fetchBasic'],
})
)(ProfileBasic);

• model.js也没有改动

import { queryBasicProfile } from './service';

const Model = {
  namespace: 'profileBasic',
  state: {
    basicGoods: [],
  },
  effects: {
    *fetchBasic(_, { call, put }) {
      // 发起请求并获得请求的数据
      const response = yield call(queryBasicProfile);
      // console.log(response);
      yield put({
        type: 'show',
        payload: response,
      });
    },
  },
  reducers: {
    show(state, { payload }) {
      return { ...state, ...payload };
    },
  },
};
export default Model;

• service有改动改成我写的接口

import request from '@/utils/request';

export async function queryBasicProfile() {
  // return request('/api/profile/basic');
  return request(`service/antdapi/testmyapi`);
}

结束：pro4发起请求是从index开始经过中间的model处理和接收，真正发起请求的在service中