错误处理

本指南介绍如何在 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', '已加载本地缓存数据');
      }
    }
  });
})();

错误类型

  • 验证错误
  • 提交错误
  • 网络错误
  • 系统错误

最佳实践

  • 提供清晰的错误提示
  • 实现错误恢复机制
  • 记录错误日志
  • 优化用户体验

提示

  • 始终为用户提供明确的错误提示
  • 实现适当的重试机制
  • 考虑离线场景的处理
  • 保护用户数据安全

相关资源