开源项目低代码表单FormCreate中通过接口加载远程数据选项
在开源项目低代码表单 FormCreate 中，fetch 属性提供了强大的功能，允许从远程 API 加载数据并将其应用到表单组件中。通过灵活的配置，fetch 可以在多种场景下发挥作用，从简单的选项加载到复杂的动态数据处理。
源码地址: Github | Gitee
类型
以下是 fetch 属性的详细类型定义：
type Fetch = {
//接口地址
action: String;
//数据插入的位置，例如 'options' 或 'props.options'
to?: String;
//解析接口返回的数据，返回最终需要的结果，默认取 `res.data`
parse?: String | ((body: any, rule:Rule, fapi:fApi) => any);
//请求方式，默认值为 'GET'
method?: String;
//请求时附带的数据
data?: Object;
//调用接口附带数据的提交方式,默认为 `formData`
dataType?: '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);
})
}
示例
通过接口加载数据
<template>
<div>
<form-create :rule="rule" v-model:api="fApi" :option="options"/>
</div>
</template>
<script>
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>
通过自定义方法加载数据
<template>
<div>
<form-create :rule="rule" v-model:api="fApi" :option="options"/>
</div>
</template>
<script>
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-China@2.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 token
const 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) => {
// 获取或生成 Token
const token = 'your-auth-token'; // 这里的 token 可以从 Vuex、localStorage 或其他地方获取
// 设置请求头，附加 Authorization token
const headers = {
...options.headers,
Authorization: `Bearer ${token}`,
};
// 发起请求
fetch(options.action, {
method: options.method || 'GET', // 默认请求方法为 GET
headers: 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 等参数，发起请求并处理响应数据。