数据管理

API 提供了一系列数据管理功能，帮助开发者轻松地与外部数据源进行交互，管理表单中的外部数据，并确保表单组件能够根据这些数据进行动态更新。

数据结构

以下是 Api 数据管理相关的数据结构及简明解释：

interface Api {
  // 发送远程请求，支持自定义的请求逻辑和处理方式
  fetch(opt: FetchOption): Promise<any>;
  // 设置外部数据，支持在表单中使用外部数据源
  setData(id: string, value?: any): void;
  // 获取外部数据，返回之前设置的数据对象
  getData(id: string, defaultValue?: any): any;
  // 刷新与外部数据相关的组件，确保数据变更后 UI 同步更新
  refreshData(id: string): void;
}

远程请求

fetch 方法用于发起远程请求，以获取外部数据或将数据发送到服务器。它与表单组件深度集成，可根据请求结果动态更新表单的选项或数据。

type fetch = (opt: FetchOption) => Promise<any>;

fApi.fetch({
    action: '/api/get-options',
    method: 'GET',
    to: 'props.options',
    onSuccess(data) {
        console.log('获取的数据:', data);
    },
    onError(error) {
        console.error('请求失败:', error);
    }
});

设置外部数据

setData 方法用于将外部数据挂载到表单中，使得这些数据可以被表单中的组件使用。这些数据可以是静态的，也可以是从外部数据源动态获取的。

type setData = (id: string, value?: any)=> void;

fApi.setData('categories', [
    { label: 'Electronics', value: 'electronics' },
    { label: 'Clothing', value: 'clothing' },
    { label: 'Home & Garden', value: 'home_garden' },
]);
console.log('外部数据已设置:', fApi.getData('categories'));

获取外部数据

getData 方法用于获取之前通过 setData 方法设置的外部数据。如果指定的数据未设置，方法将返回 defaultValue。

type getData = (id: string, defaultValue?: any) => any;

const categories = fApi.getData('categories', []);
console.log('获取的分类数据:', categories);

刷新外部数据相关组件

refreshData 方法用于手动刷新与指定外部数据相关的组件渲染。当外部数据发生变化时，可以调用该方法以确保表单组件正确反映最新的数据状态。

type refreshData = (id: string) => void;

fApi.setData('categories', [
  { label: 'Books', value: 'books' },
  { label: 'Music', value: 'music' },
]);
fApi.refreshData('categories');
console.log('与分类数据相关的组件已刷新');

示例

根据用户输入动态获取并设置城市数据

在一个地址表单中，用户选择省份后，系统自动从服务器获取该省份对应的城市列表，并动态更新表单中的城市选项。

fApi.fetch({
    action: '/api/get-cities',
    method: 'GET',
    data: { province: fApi.getValue('province') }
}).then((response) => {
    // 将获取到的城市数据设置到表单中
    fApi.setData('cities', response.data);
    // 刷新城市字段，确保 UI 显示最新的城市选项
    fApi.refreshData('cities');
}).catch((error) => {
    console.error('获取城市数据失败:', error);
});

根据外部数据初始化表单

在一个用户编辑表单中，需要从服务器获取用户的详细信息，并将这些数据预填充到表单中。

fApi.fetch({
    action: '/api/get-user-info',
    method: 'GET',
    data: { userId: fApi.getValue('user_id') }
}).then((response) => {
    // 设置用户信息到表单
    fApi.setData('userInfo', response.data);
    // 更新表单中的相关字段
    fApi.setValue({
        name: response.data.name,
        email: response.data.email,
        phone: response.data.phone
    });
    fApi.refreshData('userInfo'); // 确保表单同步更新
}).catch((error) => {
    console.error('获取用户信息失败:', error);
});