react ant-design-pro项目搭建（三）——调用接口实现与服务器的交互

待我称王封你为后i 2022-11-26 01:45 150阅读 0赞

在下载的脚手架中已经有调用接口实现与服务器的交互的例子了，我们以登录流程为例来进行讲解

1.在services层创建名为login的service,定义调用后端接口的方法

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 1][]

2.在model层创建名为login的model调用services中方法

![20200810095347345.png][]

import { stringify } from 'querystring';
    import { router } from 'umi';
    import { fakeAccountLogin, getFakeCaptcha } from '@/services/login';
    import { setAuthority } from '@/utils/authority';
    import { getPageQuery } from '@/utils/utils';
    const Model = {
      namespace: 'login',//命名空间，必须是唯一的名字
      state: {
        status: undefined,
      },
      effects: {
        *login({ payload }, { call, put }) {
          //调用services中的fakeAccountLogin函数
          const response = yield call(fakeAccountLogin, payload);
          yield put({
            type: 'changeLoginStatus',
            payload: response,
          }); // Login successfully
    
          if (response.code === 200) {
            const urlParams = new URL(window.location.href);
            const params = getPageQuery();
            let { redirect } = params;
    
            if (redirect) {
              const redirectUrlParams = new URL(redirect);
    
              if (redirectUrlParams.origin === urlParams.origin) {
                redirect = redirect.substr(urlParams.origin.length);
    
                if (redirect.match(/^\/.*#/)) {
                  redirect = redirect.substr(redirect.indexOf('#') + 1);
                }
              } else {
                window.location.href = '/';
                return;
              }
            }
    
            router.replace(redirect || '/');
          }
        }
      },
      reducers: {//要想改变state中的数据，必须通过reducers，
        //payload是参数
        changeLoginStatus(state, { payload }) {
          setAuthority(payload.currentAuthority);
          return { ...state, status: payload.status, type: payload.type };
        },
      },
    };
    export default Model;

3.页面发起登录请求

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 2][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 3][]

‘login/login'  空间名/services中effect名

这样登录与后台交互功能就完成了

上一章：[react ant-design-pro项目搭建——开发生产环境配置][react ant-design-pro]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70]: https://img-blog.csdnimg.cn/20200810095042809.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 1]: /images/20221124/9ac31962018d4cbea8e0a803f51e6ad6.png
[20200810095347345.png]: /images/20221124/090a8997667547b2a11804560c415a59.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20200810092812661.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA==,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L1NIVUlZSV8yNA_size_16_color_FFFFFF_t_70 3]: /images/20221124/035a3e1e8f48458590a594c3d96f8443.png
[react ant-design-pro]: https://blog.csdn.net/SHUIYI_24/article/details/107846673