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

Headings (most frequently used words):

远程请求, 指南, 基础, 扩展, 教程, 数据结构, 发送get请求, 发送post请求, 在请求中使用变量, 通过前置事件修改请求, 请求后置回调, 通过, api, 发送请求, 重写内置的请求方法,

Text of the page (most frequently used words):
api (21), token (19), name (17), cookie (14), data (12), fetch (11), json (9), return (8), headers (8), parse (8), const (7), form (7), action (7), formdata (7), config (6), fcdesigner (6), res (6), then (5), item (5), post (5), get (5), getdata (4), function (4), value (4), url (4), beforefetch (4), datatype (4), method (4), user (3), getcookie (3), todo (3), query (3), items (3), length (3), cookiearray (3), userid (3), object (3), 远程请求 (3), 扩展模板 (2), page (2), 扩展组件分组 (2), globalfetch (2), formcreate (2), designerform (2), error (2), success (2), status (2), getlocalstorage (2), null (2), catch (2), try (2), substring (2), let (2), decodedcookie (2), userage (2), username (2), bearer (2), authorization (2), content (2), type (2), https (2), example (2), com (2), 请求示例 (2), select (2), body (2), void (2), 移动端 (2), element (2), navigation (2), vue3版本 (2), vue2版本 (2), next, previous, pager, create, designer, from, import, 文件上传操作同样会调用, 需注意其特殊适配要求, 具体实现可参考, 内置请求模块, 可以通过重写, 方法来修改内置发送请求的方法, 从而动态修改请求参数, 重写内置的请求方法, getvalue, 在事件中可以通过, 方法手动发送远程请求, 发送请求, script, 请求失败, new, throw, else, map, 提取并格式化数据, 以下是如何使用, 函数来处理, 请求返回的数据, 并将其格式化为一个包含项目名称的数组, 示例代码, 您可以使用, 函数来处理这些数据, 您可能想要提取, 并格式化成另一种结构, total, 假设您有一个, 接口返回的数据格式如下, 解析和处理请求结果, 是一个后置请求回调函数, 用于在请求完成后处理返回的数据, 您可以在, 函数中对数据进行格式化, 转换或其他处理操作, 以便在组件中使用, 请求后置回调, 添加自定义, 变量到, user_id, uid, getitem, localstorage, 添加用户, 到请求, indexof, charat, while, for, split, document, decodeuricomponent, 到请求头, 修改参数, 在事件配置弹窗中, 并输入, 配置beforefetch事件, 进入表单设计器, 点击配置面板中的, 打开事件配置弹窗, 打开表单事件配置弹窗, 事件中获取的是最终请求数据, 不再支持模板变量解析, 事件是在发送请求之前触发的回调函数, 您可以在这个回调中对请求参数进行修改, 比如增加请求头, 修改请求, 添加查询参数等, 通过前置事件修改请求, 支持使用, 变量名, 的方式直接读取内置变量, 全局变量和外部传入的数据, 具体定义方法请查阅, 变量使用文档, 替换为表单中的userage字段, 替换为表单中的username字段, 替换为表单中的userid字段, 替换为cookie中的token字段, 在实际请求过程中, 设计器会自动替换双大括号中的变量值, 变量在请求中的替换, age, application, update, 请求的数据部分同样可以使用变量进行动态设置, 请求数据示例, 在实际请求执行时, 会被替换为实际的变量值, details, 如果您的请求, 中需要插入动态变量, 例如用户, 可以使用双大括号语法来指定变量, 假设我们有一个远程, 请求需要动态插入用户的, 我们可以在配置中使用双大括号, 语法来实现这一点, 在配置请求时, 可以使用双大括号, 来引用变量, 支持在链接, 请求头和数据中使用变量, 会在请求时被替换为变量, 如果变量的值是对象, 可以通过, variablename, attributename, 访问对象中的属性值, 在请求中使用变量, 表单提交成功, submit, globaltoken, 外部变量, 提交表单数据, 发送post请求, props, options, getrule, 参数获取对应, 组件的配置数据, 发送get请求, 如需将请求, 设置为, 需定义, progressevent, onerror, 请求失败后的回调, any, onsuccess, 请求成功后的回调, 后置数据数据回调, 发送请求的请求头, 携带数据的发送方式, 发送请求时携带的数据, 请求方式, string, 请求地址, fetchconfig, 数据结构, 在表单设计器中, 有时我们需要在发起远程请求之前动态修改请求的参数, 例如添加认证, 或用户, 事件和变量, 我们可以实现这一需求, 导出vue组件, 数据库表设计, 组件中获取设计器, 控制表单配置项显隐, 控制组件配置项显隐, 调整配置面板顺序, 可视化设计组件插槽, 默认收起组件分组, 限制容器可拖入组件, 组件类型切换, 组件值格式转换, 组件多语言配置, 隐藏组件和菜单, 设置组件默认配置, 设置表单默认配置, 生成选项配置规则, 获取表单结构树, 控制组件操作权限, 控制功能模块显隐, 覆盖内置组件, 渲染时监听事件, 打印表单内容, 表单渲染, 保存表单设计, 上传组件, 设置表单默认值, 常见问题, 扩展表单api, 扩展字体, 扩展右侧配置规则, 扩展自定义操作, 扩展容器组件, 扩展组件, 管理字段列表, 管理字段id, 快捷键, inject, 表单验证规则, 渲染函数, 阅读模式, 组件联动, 表单多语言, 跨项目渲染, 移动端自适应, 表单api, 内置分组和组件, 助手方法, 原型方法, 设计器的事件, 设计器的数据和方法, 设计器的配置, ts类型定义, 高级版表单设计器, 渲染器文档, 源码集成, agent, skills, ai表单助理, 已开源, 多语言, 版本对比, vant, ant, design, vue, plus, sidebar, 返回顶部, menu, appearance, 高级版, 更新记录, 在线演示, 产品手册, 开发文档, main, search, skip,

Text of the page (random words):
远程请求 fcdesigner skip to content fcdesigner search k main navigation 官网 开发文档 产品手册 在线演示 vue2版本 vue3版本 移动端 更新记录 3 5 0 vue2版本 vue3版本 高级版 appearance menu 返回顶部 sidebar navigation 指南 介绍 element ui 版本 element plus 版本 ant design vue 版本 vant 移动端 版本 版本对比 图标 多语言 ai表单助理 已开源 agent skills 源码集成 渲染器文档 高级版表单设计器 基础 ts类型定义 设计器的配置 设计器的数据和方法 设计器的事件 原型方法 助手方法 内置分组和组件 变量 表单api 移动端自适应 跨项目渲染 表单多语言 组件联动 阅读模式 渲染函数 表单验证规则 inject 快捷键 扩展 管理字段id 管理字段列表 扩展组件分组 远程请求 扩展模板 扩展组件 扩展容器组件 扩展自定义操作 扩展右侧配置规则 扩展字体 扩展表单api 教程 常见问题 设置表单默认值 上传组件 保存表单设计 表单渲染 打印表单内容 渲染时监听事件 覆盖内置组件 控制功能模块显隐 控制组件操作权限 获取表单结构树 生成选项配置规则 设置表单默认配置 设置组件默认配置 隐藏组件和菜单 组件多语言配置 组件值格式转换 组件类型切换 限制容器可拖入组件 默认收起组件分组 可视化设计组件插槽 调整配置面板顺序 控制组件配置项显隐 控制表单配置项显隐 组件中获取设计器 数据库表设计 导出vue组件 意见 建议 目录 远程请求 在表单设计器中 有时我们需要在发起远程请求之前动态修改请求的参数 例如添加认证 token 或用户 id 通过 beforefetch 事件和变量 我们可以实现这一需求 数据结构 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 注意 如需将请求 body 设置为 json 格式 需定义 datatype 为 json 参数 发送get请求 发送 get 请求示例 通过 name 参数获取对应 select 组件的配置数据 js const formdata api formdata api fetch action api getdata query name formdata name then res api getrule select props options res data 发送post请求 发送 post 请求示例 提交表单数据 js const formdata api formdata 外部变量 const token api getdata globaltoken api fetch action api submit method post datatype json data formdata headers token token then res 表单提交成功 在请求中使用变量 在配置请求时 可以使用双大括号 来引用变量 支持在链接 请求头和数据中使用变量 例如 token 会在请求时被替换为变量 token 的值 如果变量的值是对象 可以通过 variablename attributename 访问对象中的属性值 示例 假设我们有一个远程 api 请求需要动态插入用户的 token 和 id 我们可以在配置中使用双大括号 语法来实现这一点 请求 url 示例 get 方式 如果您的请求 url 中需要插入动态变量 例如用户 id 可以使用双大括号语法来指定变量 js api fetch action https api example com user form userid details method get headers authorization bearer cookie token data then res todo 在实际请求执行时 userid 和 token 会被替换为实际的变量值 请求数据示例 post 方式 请求的数据部分同样可以使用变量进行动态设置 js api fetch action https api example com update method post datatype json headers content type application json authorization bearer cookie token data name form username age form userage then res todo 变量在请求中的替换 在实际请求过程中 设计器会自动替换双大括号中的变量值 例如 cookie token 替换为cookie中的token字段 form userid 替换为表单中的userid字段 form username 替换为表单中的username字段 form userage 替换为表单中的userage字段 支持使用 变量名 的方式直接读取内置变量 全局变量和外部传入的数据 具体定义方法请查阅 变量使用文档 通过前置事件修改请求 beforefetch 事件是在发送请求之前触发的回调函数 您可以在这个回调中对请求参数进行修改 比如增加请求头 修改请求 url 添加查询参数等 注意 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 重写内置的请求方法 可以通过重写 formcreate 的 fetch 方法来修改内置发送请求的方法 从而动态修改请求参数 注意 文件上传操作同样会调用 fetch 方法 需注意其特殊适配要求 具体实现可参考 内置请求模块 js import fcdesigner from form create designer const globalfetch fcdesigner designerform fetch fcdesigner designerform fetch fcdesigner formcreate fetch config config headers token getcookie user token return globalfetch config pager previous page 扩展组件分组 next page 扩展模板