Flutter中如何实现调用API触发socket exception时的提示页面

步骤1：准备资源并配置项目 #

• 提前准备好Socket异常对应的示意图片，放入项目assets/images/目录下
• 打开项目根目录的pubspec.yaml文件，在flutter节点下添加资源引用声明，配置示例：

flutter:
  assets:
    - assets/images/socket_error.png # 替换为你自己的图片路径

步骤2：封装网络请求的异常捕获逻辑 #

你可以在网络请求的统一封装层添加SocketException的捕获判断，以下是Dio请求库的示例代码：

import 'dart:io';
import 'package:dio/dio.dart';

// 自定义异常类型方便上层识别
enum CustomError {
  socketError, // Socket异常
  otherError, // 其他异常
}

Future<dynamic> fetchApiData(String url) async {
  try {
    final response = await Dio().get(url);
    return response.data;
  } on SocketException catch (_) {
    // 捕获到Socket异常，抛出对应标识
    throw CustomError.socketError;
  } catch (e) {
    throw CustomError.otherError;
  }
}

步骤3：页面层判断异常并展示对应图片 #

在页面调用请求的逻辑中，捕获异常后更新状态，根据异常类型控制UI展示，StatefulWidget示例如下：

class DemoPage extends StatefulWidget {
  const DemoPage({super.key});

  @override
  State<DemoPage> createState() => _DemoPageState();
}

class _DemoPageState extends State<DemoPage> {
  CustomError? _currentError;

  Future<void> _loadData() async {
    setState(() => _currentError = null);
    try {
      await fetchApiData("你的接口地址");
      // 请求成功后处理业务逻辑
    } on CustomError catch (err) {
      setState(() => _currentError = err);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: _currentError == CustomError.socketError
          ? Center(
              // 识别到Socket异常时展示对应提示图
              child: Image.asset(
                "assets/images/socket_error.png",
                width: 240,
                height: 240,
              ),
            )
          : const Center(child: Text("页面正常内容")),
      floatingActionButton: FloatingActionButton(
        onPressed: _loadData,
        child: const Icon(Icons.refresh),
      ),
    );
  }
}

如果你使用FutureBuilder处理异步请求，可以直接在builder的snapshot.error判断中识别异常类型，匹配到SocketException后直接返回图片组件即可，不需要单独定义状态变量。

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