Ant Design Pro 2.0 调用后台接口数据

这几天折腾了Ant Design Pro，组件什么的都挺容易的。后来准备调用后台提供的接口。之前重来没接触过umi和dva，
调用接口时有些懵。看了一些umi和dva的文档之后再反过来看And Design Pro文档，折腾了好些时间才把这个问题解决，
在这里记录和分享一下，希望能帮到和我一样的同志。

---

1. 修改/config/config.js文件

---

    //...
    export default {
        //...
        proxy: {
            "/testapi/": {
            "target": "https://www.xxx.com/",
            "changeOrigin": true,
            pathRewrite: { 
                '^/testapi/': '/api/api.php?request='
                 }, 
            },
        },
        //...
        //这个时候访问localhost:8000/testapi/就代理到了https://www.xxx.com/api/api.php?request=,
        //request后面的将在services中定义
    }

• Ant Design Pro 内置了 umi，umi 使用了 webpack devServer来支持代理。 你只需要在 config.js 中配置 proxy 属性。只要 proxy 和 mock url 不同，是可以共存的。

---

2.调用接口

---

• 在/src/services/api.js文件中创建一个异步方法并使用/src/utils/request.js中的request方法定义请求地址

   import request from '@/utils/request';
   //param为参数
   export async function firstApi(param) {
       return request('/testapi/view_list',{
           method:"post",
           //请求参数
           body:{
               ...param,
           }
       });
   }

• request方法第一个参数为请求地址，第二个为对象，定义请求方式或参数等。请求地址里的/testap/则代理到第一步配置的proxy对象中，如此一来完整的请求地址是：https://localhost:8000/testapi/view_list，实际则是代理的：https://www.baidu.com/api/api.php?request=view_list，只不过是将请求接口的url中不需要改动的写到了proxy对象中，经常需要修改的定义到了services中

---

3创建model

---

• 在/src/models文件夹中创建新的model文件。例如：bit.js

   //这里是刚刚编写的api接口，在model中调用
   import { firstApi } from "../services/api";

   export default {
       //命名空间，必须保持全局唯一
       namespace: 'mbit',

       state: {
           bit: [],
       },
       
       effects: {
           *firstRequest({ payload }, { call, put }) {
               const response = yield call(firstApi, payload);
               yield put({
                   //type值要能匹配到reducers中的方法
                   type: "reMethod",
                   payload: Array.isArray(response) ? response : [],
               });
           }
       },

       reducers: {
           //与effects中put->type值匹配
           reMethod(state, action) {
               return {
                   ...state,
                   bit: action.payload,
               }
           }
       },
}

---

4.使用model

---

• 在/src/components/中创建一个组件，在组件中创建连接，以model->bit.js为例

    import styles from "./Bit.less";
    import request from "@/utils/request";
    import { connect } from 'dva';
    //使用dva中的connect与model建立间距
    @connect(({ mbit, loading }) => ({
        //将 routers 中设置的页面组件和 model 真正的关联起来，请注意与  namespace名称一致！
         mbit,
         //是否加载完成
         loading: loading.models.monitor,
    }))
    class Bit extends React.Component {
    state = {
    }
    componentDidMount() {
        //注意务必先使用dva中的connect建立连接，否则是无法调用props中的dispatch法的
        this.props.dispatch({
            //调用model中的方法发起请求，（model的命名空间+方法名）
            type: 'mbit/firstRequest',
            //设置参数
            payload:{
                args1:"参数1",
                args2:"参数2",
            },
        });
    }
    render() {
        //打印输出结果
        const { bit } = this.props.mbit;
        console.log( bit );
        return (
            <div>测试请求</div>
        );
    }
    }
    export default Bit;

需要注意的是，配置了proxy代理后。在浏览器中看到的所有Network请求将不会显示实际请求地址。