Flutter Web闪屏页卡顿：TypeError读取statusCode空值报错求助

问题核心分析 #

报错 TypeError: Cannot read properties of null (reading 'statusCode') 的本质是：你在 ApiErrorHandler.getMessage 方法中尝试读取一个 null 对象的 statusCode 属性。该问题仅出现在 Web 平台，说明移动端（Android/iOS）与 Web 平台的网络错误处理逻辑存在差异——移动端中你依赖的响应对象始终有值，但 Web 平台下，当请求因跨域拦截、浏览器安全限制或请求未正常发送时，对应的响应对象会为 null。

排查与修复步骤 #

1. 修复 ApiErrorHandler.getMessage 的空值校验 #

定位到 getMessage 方法中读取 statusCode 的代码段，先添加严格的 null 校验，避免直接访问 null 属性：

String getMessage(dynamic error) {
  // 先判断响应对象是否存在
  if (error?.response == null) {
    return "网络请求失败，请检查网络或配置"; // 根据业务场景自定义提示文本
  }
  
  final statusCode = error.response.statusCode;
  // 原有状态码分支逻辑...
}

2. 检查 splash_provider.dart 的请求错误处理 #

查看闪屏页初始化时的网络请求逻辑，确认是否未处理非 HTTP 类型的错误（比如无网络、请求被浏览器拦截）：

Future<void> loadSplashData() async {
  try {
    final response = await yourApiClient.fetchInitData();
    // 请求成功逻辑
  } catch (e) {
    // 区分 HTTP 错误与其他类型错误
    if (e is DioException) { // 若使用 Dio 库，其他网络库逻辑类似
      final errorMsg = ApiErrorHandler.getMessage(e);
      // 处理错误提示
    } else {
      // 处理非 HTTP 错误：如无网络、JSON 解析失败等
      debugPrint("闪屏初始化错误：$e");
    }
  }
}

3. 排查 Web 平台专属问题 #

• 跨域问题：打开浏览器开发者工具（F12）的 Network 标签，检查请求是否触发 CORS 错误。若存在，需要后端配置响应头 Access-Control-Allow-Origin 等跨域参数。
• 混合内容限制：若你的 Web 应用部署在 HTTPS 环境，确保所有网络请求也使用 HTTPS，浏览器会自动阻止 HTTPS 页面中的 HTTP 请求。

4. 调试验证 #

在 ApiErrorHandler.getMessage 中添加日志，对比移动端与 Web 平台的错误对象差异：

String getMessage(dynamic error) {
  debugPrint("错误对象详情：$error");
  debugPrint("响应对象：${error?.response}");
  // 原有逻辑...
}

通过浏览器 Console 查看日志，明确 Web 平台下错误对象的具体结构，进一步调整处理逻辑。

内容的提问来源于stack exchange，提问作者Nishant Tyagi