错误处理
本指南介绍如何在 Kinlink 中处理各种错误情况,包括验证错误、提交错误和网络错误等,确保提供友好的用户体验。
验证错误处理
了解如何处理字段验证过程中的各种错误情况。
JavaScript
// 验证错误处理示例
(function() {
kinlink.events.on(kinlink.FormEvents.FORM_LOADED, () => {
const form = kinlink.formApi;
// 添加字段验证
form.addFieldValidator('邮箱', async (value) => {
if (!value) return;
try {
// 基础格式验证
if (!/^\w+@\w+\.\w+$/.test(value)) {
return '请输入有效的邮箱地址';
}
// 远程验证
const response = await fetch(`/api/check-email?email=${value}`);
if (!response.ok) {
throw new Error('验证服务异常');
}
const data = await response.json();
if (data.exists) {
return '该邮箱已被使用';
}
return undefined;
} catch (error) {
console.error('邮箱验证出错:', error);
return '验证失败,请稍后重试';
}
});
});
})();提交错误处理
学习如何处理表单提交过程中的错误,并提供适当的用户反馈。
JavaScript
// 提交错误处理示例
(function() {
// 提交前验证
kinlink.events.on(kinlink.FormEvents.BEFORE_SUBMIT, async (data) => {
const form = kinlink.formApi;
try {
// 执行自定义验证
const { errors, isValid } = await form.validateForm();
if (!isValid) {
form.showMessage('error', '表单验证失败,请检查输入');
console.error('验证错误:', errors);
return false;
}
// 可以在这里修改提交的数据
data.values.submitTime = new Date().toISOString();
return true;
} catch (error) {
console.error('提交前验证出错:', error);
form.showMessage('error', '验证过程出错,请重试');
return false;
}
});
// 提交后处理
kinlink.events.on(kinlink.FormEvents.AFTER_SUBMIT, (data) => {
const form = kinlink.formApi;
const { success, result, error } = data;
if (success) {
form.showMessage('success', '提交成功!');
} else {
console.error('提交失败:', error);
form.showMessage('error', '提交失败: ' + (error?.message || '未知错误'));
// 根据错误类型执行不同的恢复操作
if (error?.type === 'network') {
// 网络错误,可以保存草稿
saveDraft(form.getAllValues());
} else if (error?.type === 'validation') {
// 突出显示有问题的字段
highlightErrorFields(error.fields);
}
}
});
function saveDraft(values) {
try {
localStorage.setItem('form_draft', JSON.stringify(values));
kinlink.formApi.showMessage('info', '已保存草稿');
} catch (error) {
console.error('保存草稿失败:', error);
}
}
function highlightErrorFields(fields) {
const form = kinlink.formApi;
fields.forEach(field => {
form.setFieldComponentStyle(field, {
borderColor: '#ff4d4f',
backgroundColor: '#fff2f0'
});
});
}
})();网络错误处理
了解如何处理网络请求过程中的错误,包括重试机制和离线支持。
JavaScript
// 网络错误处理示例
(function() {
let retryCount = 0;
const MAX_RETRIES = 3;
async function fetchWithRetry(url, options) {
while (retryCount < MAX_RETRIES) {
try {
const response = await fetch(url, options);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return await response.json();
} catch (error) {
retryCount++;
if (retryCount === MAX_RETRIES) {
throw new Error('请求失败,请检查网络连接');
}
// 等待一段时间后重试
await new Promise(resolve => setTimeout(resolve, 1000 * retryCount));
}
}
}
kinlink.events.on(kinlink.FormEvents.FORM_LOADED, async () => {
const form = kinlink.formApi;
try {
// 加载初始数据
const data = await fetchWithRetry('/api/initial-data');
form.setFieldsValue(data);
} catch (error) {
console.error('加载数据失败:', error);
form.showMessage('error', error.message);
// 尝试加载本地缓存
const cached = localStorage.getItem('form_data');
if (cached) {
form.setFieldsValue(JSON.parse(cached));
form.showMessage('warning', '已加载本地缓存数据');
}
}
});
})();错误类型
- 验证错误
- 提交错误
- 网络错误
- 系统错误
最佳实践
- 提供清晰的错误提示
- 实现错误恢复机制
- 记录错误日志
- 优化用户体验
提示
- 始终为用户提供明确的错误提示
- 实现适当的重试机制
- 考虑离线场景的处理
- 保护用户数据安全