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;

你可能感兴趣的:(React)