扩展远程请求

在表单设计器中，有时我们需要在发起远程请求之前动态修改请求的参数，例如添加认证 Token 或用户 ID。通过 beforeFetch 事件和变量，我们可以实现这一需求。

数据结构

type FetchConfig = {
    //请求地址
    action: String;
    //请求方式
    method?: String;
    //发送请求时携带的数据
    data?: Object;
    //携带数据的发送方式
    dataType?: 'json';
    //发送请求的请求头
    headers?: Object;
    //后置数据数据回调
    parse?: Function;
}

通过前置事件修改请求

beforeFetch 事件是在发送请求之前触发的回调函数。您可以在这个回调中对请求参数进行修改，比如增加请求头、修改请求 URL、添加查询参数等。

1. 打开表单事件配置弹窗

进入表单设计器，点击配置面板中的“事件”选项，打开事件配置弹窗。

2. 配置beforeFetch事件

在事件配置弹窗中，选择 beforeFetch 事件，并输入：

3. 修改参数

例如，增加 token 到请求头：

function getCookie(name) {
    name = name + '=';
    const decodedCookie = decodeURIComponent(document.cookie);
    const cookieArray = decodedCookie.split(';');
    for (let i = 0; i < cookieArray.length; i++) {
        let cookie = cookieArray[i];
        while (cookie.charAt(0) === ' ') {
            cookie = cookie.substring(1);
        }
        if (cookie.indexOf(name) === 0) {
            cookie = cookie.substring(name.length, cookie.length);
            try {
                return JSON.parse(cookie);
            } catch (e) {
                return cookie;
            }
        }
    }
    return null;
}
config.headers.token = getCookie('user-token');

例如，添加用户 ID 到请求 URL：

function getLocalStorage(name) {
    const value = localStorage.getItem(name);
    if (value) {
        try {
            return JSON.parse(value);
        } catch (e) {
            return value;
        }
    }
    return null;
}
config.action += ('?=uid' + getLocalStorage('user_id'));

请求后置回调

parse 是一个后置请求回调函数，用于在请求完成后处理返回的数据。您可以在 parse 函数中对数据进行格式化、转换或其他处理操作，以便在组件中使用。

示例：解析和处理请求结果

假设您有一个 API 接口返回的数据格式如下：

{
    "status": "success",
    "data": {
        "items": [
            { "id": 1, "name": "Item 1" },
            { "id": 2, "name": "Item 2" }
        ],
        "total": 2
    }
}

您可以使用 parse 函数来处理这些数据。例如，您可能想要提取 data.items 并格式化成另一种结构。

示例代码

以下是如何使用 parse 函数来处理 API 请求返回的数据，并将其格式化为一个包含项目名称的数组：

function parse (data) {
    if (data.status === 'success') {
        // 提取并格式化数据
        return data.data.items.map(item => ({
            id: item.id,
            name: item.name
        }));
    } else {
        throw new Error('请求失败');
    }
}
</script>

通过重写fetch方法修改

可以通过重写 formCreate 的 fetch 方法来修改内置发送请求的方法，从而动态修改请求参数。

import FcDesigner from '@form-create/designer'


FcDesigner.designerForm.fetch = FcDesigner.formCreate.fetch = (options) => {
    options.headers.token = getCookie('user-token');
    fetch(options.action, {
        headers: options.headers,
        method: options.method,
    }).then(res=>{
        res.json().then(data=>{
            options.onSuccess(data);
        })
    }).catch(e=>{
        options.onError(e);
    })
}