如何在请求中使用变量？这里有你要的答案

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

[id_[id_276230384]015248141]

表单构建工具里，偶尔要等向服务器发送信息时，临时调整信息内容，比如加上验证码或客户编号。利用触发动作时机和变量，能够完成这个任务。

数据结构

ts

type FetchConfig = {
    //请求地址
    action: String;
    //请求方式
    method?: 'GET' | 'POST';
    //GET 参数
    query?: Object;
    //发送请求时携带的数据
    data?: Object;
    //携带数据的发送方式
    dataType?: 'json' | 'formData';
    //发送请求的请求头
    headers?: Object;
    //后置数据数据回调
    parse?: Function;
    //请求成功后的回调
    onSuccess: (body: any) => void
    //请求失败后的回调
    onError?: (e: Error | ProgressEvent) => void;
}

在请求中使用变量

设置请求时，能够运用两个大括号 {{ }} 来调用参数。能够在路径、头信息和数据里调用参数。比如，{{token}} 在发送请求时会转为参数 token 的具体内容。倘若参数的内容是复杂类型，能够用 {{parameterName.fieldName}} 来获取该复杂类型里的某个字段值。

示例

设想存在一个需要远程调用的接口，该接口要求动态载入用户凭证与标识，我们能够借助配置文件里的特殊符号来实现这一功能，即采用一对大括号包围的格式。

请求 URL 示例

动态变量，比如用户 ID，若需添加到请求 URL 中，可用一对大括号来标明

js

const config = {
    action: 这个网址指向一个特定的用户信息资源,路径包含了用户标识符,格式为标准网络链接,通过动态参数实现个性化访问,其中包含域名,路径主体和唯一用户参数,该链接用于获取指定用户的详细信息,结构清晰且功能明确,遵循了常见的RESTful设计原则,用户标识部分使用花括号包裹,便于系统解析和替换,整体构成一个完整的网络请求地址,
    method: 'GET',
    headers: {
        'Authorization': 携带这个cookie的值，作为凭证，进行验证，然后才能访问，这是必须的步骤，用户登录后才会生成，并且要妥善保管，不能泄露给他人，否则会有风险，系统会识别这个标识，确认身份，才能执行相关操作，这是安全机制的要求，非常重要，务必注意。
    },
    data: {},
};

执行请求时，{{userId}} 以及 {{token}} 将会被实际的变量值所替换。

请求数据示例

请求的数据部分同样可以使用变量进行动态设置：

js

const config = {
    action: 这个网址是用于更新数据的接口地址,它指向特定的服务器路径,包含了域名和资源标识符,通过这个链接可以发送请求进行信息更新操作,是系统维护和功能扩展的重要组成部分。,
    method: 'PUT',
    headers: {
        'Content-Type': 'application/json',
        'Authorization': 'Bearer {{$cookie.token}}'
    },
    data: {
        name: '{{$form.userName}}',
        age: '{{$form.userAge}}'
    },
};

变量在请求中的替换

在具体操作时，制作者会自行更替括号里的内容，比如

能够通过 {{变量名}} 的形式直接获取内置变量、全局变量以及外部传入的数据,详细说明请参考变量使用文档

通过前置事件修改请求

在发起请求之前会触发 beforeFetch 的处理函数。该函数允许对请求信息进行改动，例如增加头部信息、调整请求地址、补充筛选条件等。

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

打开表单编辑界面，找到设置区间的“触发”功能，启动功能设定窗口。

2. 配置beforeFetch事件

在事件设置界面里，挑选 beforeFetch 这个环节，然后填入：

3. 修改参数

例如，增加 token 到请求头：

js

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：

js

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'));

例如，添加自定义 token 变量到 headers 中：

js

config.headers.token += data.api.getData('token');

请求后置回调

parse 是一个在请求结束后执行的回调函数，作用是处理返回的资料。您能够借助 parse 函数，对资料进行整理、变更等操作，从而方便在组件里应用。

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

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

json

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

可以利用 parse 这个功能来应对这些信息，比如，或许需要取出 data.items ，并将其改造成不同的样子。

示例代码

这里展示怎样运用 parse 函数来解析 API 请求传回的信息，接着把它整理成一个仅含项目名称的列表：

js

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

通过 API 发送请求

在事件中可以通过 api.fetch 方法手动发送远程请求

js

api.fetch({
    action: '/api/getdata',
    query: {
        name: api.getValue('name')
    }
}).then(res=>{
    //todo
});

通过重写fetch方法修改

可以调整 formCreate 的获取方式来更改预设的请求数据发送流程，进而实现请求内容的变化。

js

import FcDesigner from这个标识用来指代特定的设计工具，它属于一个系统模块，主要用于构建表单界面，并且提供了可视化编辑的功能。


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);
    })
}