Version: 1.x

接口调用

Godzilla UI 是一套基于 React、Ant Design、Mobx 技术栈的单页面应用，我们提供的是前端代码和本地模拟数据的开发模式，通过 API 的形式和任何技术栈的服务端应用一起工作。下面将简单介绍和服务端交互的基本写法。

前端请求流程

在 Godzilla UI 中，一个完整的前端 UI 交互到服务端处理流程是这样的：

UI 组件交互操作；
调用 Store.js 的处理函数（每个组件有独立的 store）
使用封装的 API 发送请求；
获取服务端返回；
然后调用 action 函数改变 mobx 对象
页面自动重新 render

从上面的流程可以看出，为了方便管理维护，统一的请求处理都放在 Sotre.js 这个文件中，一个页面组件的所有与后端的交互都放在这里统一管理

其中，quantex-utils/API 是基于 fetch 的封装，便于统一处理 POST，GET、DELETE、PUT 等请求参数，请求头，以及错误提示信息等。具体可以参看 API 的源码

例如在 Store 中的一个请求用户信息的例子：

// Store.js
import { observable, action } from 'mobx';
import { API } from '@gza/quantex-utils';
class Store {
  api;
  constructor() {
    this.api = new API('auth');
  }
  // 获取登录用户信息
  getUserInfos = () => {
    return this.api.get('/api/v2/user_infos/current_user');
  };
}
export default Store;

// index.js
import React, { Component } from 'react';
import { observer } from 'mobx-react';
import { Alert } from '@gza/quantex-design';
import Store from './Store';

@observer
class LoginContainerComponent extends Component {
  store = new Store();
  componentDidMount() {
    this.store.getUserInfos().then(res => {
      if (res.code == 200) {
        // 处理业务逻辑
      } else {
        // 错误弹出框
        Alert.error(res.msg);
      }
    });
  }

  render() {
    return (
      <div></div>
    );
  }
}
export default LoginContainerComponent;

API 介绍

API 这个类提供了很多实用的方法，详细使用请见 API-使用 API

前端请求流程​

API 介绍​

前端请求流程

API 介绍