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

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

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

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

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.页面发起登录请求

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

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

 

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