做电脑网站手机能显示不出来,怎么查询网站所有关键词,手机网站制作服务,网站建设佰首选金手指十六在开源项目低代码表单 FormCreate 中#xff0c;fetch 属性提供了强大的功能#xff0c;允许从远程 API 加载数据并将其应用到表单组件中。通过灵活的配置#xff0c;fetch 可以在多种场景下发挥作用#xff0c;从简单的选项加载到复杂的动态数据处理。
源码地址: Github …在开源项目低代码表单 FormCreate 中fetch 属性提供了强大的功能允许从远程 API 加载数据并将其应用到表单组件中。通过灵活的配置fetch 可以在多种场景下发挥作用从简单的选项加载到复杂的动态数据处理。
源码地址: Github | Gitee 类型
以下是 fetch 属性的详细类型定义
type Fetch {//接口地址action: String;//数据插入的位置例如 options 或 props.optionsto?: String;//解析接口返回的数据返回最终需要的结果默认取 res.dataparse?: String | ((body: any, rule:Rule, fapi:fApi) any);//请求方式默认值为 GETmethod?: String;//请求时附带的数据data?: Object;//调用接口附带数据的提交方式,默认为 formDatadataType?: json;//自定义请求头信息headers?: Object;//请求失败时的回调函数onError?: (e: Error | ProgressEvent) void;}在请求前可以通过 options.beforeFetch 方法处理规则例如设置 token。
自定义请求方法
在一些高级场景中您可能需要自定义请求方式。通过重写 formCreate.fetch 方法您可以自由定义请求的逻辑。
formCreate.fetch (options) {fetch(options.action, {headers: options.headers,method: options.method,}).then(res{res.json().then(data{options.onSuccess(data);})}).catch(e{options.onError(e);})
}示例
通过接口加载数据
templatedivform-create :rulerule v-model:apifApi :optionoptions//div
/templatescript
export default {data() {return {fApi: {},options: {onSubmit: (formData) {alert(JSON.stringify(formData))}},rule: [{type: select,field: city,title: 城市,value: 陕西省,options: [],effect: {fetch: {action: http://datavmap-public.oss-cn-hangzhou.aliyuncs.com/areas/csv/100000_province.json,to: options,method: GET,parse(res) {return res.rows.map(row {return {label: row.name,value: row.adcode}})}}}}]}}
}
/script通过自定义方法加载数据
templatedivform-create :rulerule v-model:apifApi :optionoptions//div
/templatescript
export default {data() {return {fApi: {},options: {onSubmit: (formData) {alert(JSON.stringify(formData))}},rule: [{type: cascader,field: city,title: 省市,value: [陕西省, 西安市],props: {options: []},effect: {fetch: {//自定义请求action: () {function tidy(list) {return list.map(val {return {value: val.name,label: val.name,children: val.children ? tidy(val.children) : undefined}})}return new Promise((resolve) {fetch(https://cdn.jsdelivr.net/gh/modood/Administrative-divisions-of-China2.4.0/dist/pc-code.json).then(res {console.log(res)res.json().then(res {resolve(tidy(res));})})})},to: props.options,}}}]}}
}
/script自定义请求头信息
const rules [{type: select,field: product,title: 选择产品,fetch: {action: /api/products,to: options,headers: {Authorization: Bearer your-auth-token},parse: (res) res.data.map(product ({ label: product.name, value: product.id })),onError: (error) console.error(加载产品数据失败:, error)}}
]在请求前设置 Token
在发送 API 请求之前动态添加 Authorization token 到请求头中。
// 配置表单创建的全局选项
const formOptions {// 在请求发送前的钩子beforeFetch: (options) {// 动态设置请求头中的 Authorization tokenconst token your-auth-token; // 这里的 token 可以从任何存储中获取options.headers {Authorization: Bearer ${token}};}
};
// 创建表单
const rules [{type: select,field: product,title: 选择产品,fetch: {action: /api/products,to: options,parse: (res) res.data.map(product ({ label: product.name, value: product.id })),onError: (error) console.error(加载产品数据失败:, error)}}
];详细步骤 设置全局 formOptions 通过设置全局的 beforeFetch 方法可以确保在所有带有 fetch 的组件中都会执行这个钩子。 动态获取 token 在 beforeFetch 中我们可以从存储、Vuex 或其他来源动态获取 token然后将其添加到请求头中。 创建表单并使用 fetch 表单组件中的 fetch 会自动触发 beforeFetch 方法附加上设置的 Authorization token。
重写内置请求方法并设置 Token
在表单的所有 API 请求中自动附加 Authorization token 到请求头中以确保所有请求都携带有效的身份验证信息。
import formCreate from form-create/element-ui; // 假设使用 Element UI// 重写 formCreate 的内置 fetch 方法
formCreate.fetch (options) {// 获取或生成 Tokenconst token your-auth-token; // 这里的 token 可以从 Vuex、localStorage 或其他地方获取// 设置请求头附加 Authorization tokenconst headers {...options.headers,Authorization: Bearer ${token},};// 发起请求fetch(options.action, {method: options.method || GET, // 默认请求方法为 GETheaders: headers, // 包含 Authorization 的请求头body: options.method ! GET ? JSON.stringify(options.data) : null, // 如果是 POST 或其他方法添加请求体}).then(response response.json()) // 解析响应为 JSON.then(data {if (options.onSuccess) {options.onSuccess(data); // 成功回调}}).catch(error {if (options.onError) {options.onError(error); // 失败回调}});
};// 创建表单
const fApi formCreate.create([{type: select,field: product,title: 选择产品,fetch: {action: /api/products,to: options,parse: (res) res.data.map(product ({ label: product.name, value: product.id })),onError: (error) console.error(加载产品数据失败:, error),},},
], {// 其他表单配置
});详细步骤 重写 fetch 方法 在初始化时重写 formCreate.fetch 方法确保所有请求都使用这个自定义的方法。 设置 Authorization token 在每次请求中从存储中获取或生成 token并将其附加到 headers 中。 发起请求并处理响应 根据 options 中的 method、action、data 等参数发起请求并处理响应数据。
