Flutter异常处理插件api_exception_handler的使用

Flutter异常处理插件api_exception_handler的使用

引言

API Exception Handler 是一个用于处理 HTTP 请求异常的高级错误处理器。它可以帮助你更好地管理和展示请求过程中可能出现的各种错误。

开始使用

添加依赖

首先，在你的 pubspec.yaml 文件中添加 api_exception_handler 依赖：

dependencies:
  api_exception_handler: ^0.0.3

然后运行 flutter pub get 来获取该依赖包。

简单使用

下面是一个简单的示例，展示了如何使用 api_exception_handler 插件来处理网络请求并展示不同的屏幕状态（加载中、成功、失败等）。

示例代码

import 'dart:convert';
import 'package:flutter/material.dart';
import 'package:api_exception_handler/api_exception_handler.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const HomeScreen(),
    );
  }
}

class HomeScreen extends StatefulWidget {
  const HomeScreen({Key? key}) : super(key: key);

  @override
  State<HomeScreen> createState() => _HomeScreenState();
}

class _HomeScreenState extends State<HomeScreen> {
  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('API Response Handler'),
      ),
      body: APIResponseHandler(
        /// 这个函数将作为异步函数行为
        function: [fetchData()],

        /// 自定义成功屏幕
        successScreen: (data) {
          return Text(data!.data[0].toString());
        },

        /// 自定义错误屏幕
        errorScreen: (data) {
          return SizedBox(
            width: MediaQuery.of(context).size.width,
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Text(data.toString()),
                const SizedBox(
                  height: 20,
                ),
                InkWell(
                  onTap: () {
                    /// 只需调用 setState(() {}) 即可刷新数据。
                    setState(() {});
                  },
                  child: Container(
                    decoration: BoxDecoration(
                      color: Colors.blueAccent,
                      borderRadius: BorderRadius.circular(10),
                    ),
                    padding:
                        const EdgeInsets.symmetric(vertical: 8, horizontal: 20),
                    child: const Text(
                      'Retry',
                      style: TextStyle(color: Colors.white),
                    ),
                  ),
                ),
              ],
            ),
          );
        },

        /// 自定义网络错误屏幕
        networkErrorScreen:
            const Text('无法与服务器建立连接!!'),

        /// 自定义加载屏幕
        loadingScreen: const Center(
          child: CupertinoActivityIndicator(
            radius: 20,
          ),
        ),
      ),
    );
  }
}

/// 获取数据的异步函数
Future fetchData() async {
  String url = 'https://api.covid19api.com/summary/';

  final parameters = {
    '': '',
  };

  var response = await ApiHandler().get(url: url, queryParameters: parameters);
  var data = json.decode(response);

  return data;
}

使用 FutureBuilder

除了使用 APIResponseHandler，你还可以直接使用 FutureBuilder 来实现类似的功能：

FutureBuilder(
  future: fetchData(),
  builder: (BuildContext context, AsyncSnapshot snapshot) {
    if (snapshot.hasData) {
      /// 处理成功返回的数据
      return Text(snapshot.data.toString());
    } else if (snapshot.hasError) {
      /// 处理错误
      return Text('Error: ${snapshot.error}');
    } else if (snapshot.connectionState == ConnectionState.waiting) {
      /// 显示加载状态
      return const Center(
        child: CupertinoActivityIndicator(radius: 18),
      );
    } else if (snapshot.connectionState == ConnectionState.none) {
      /// 其他状态
      return Text('No connection');
    }
    return const Center(child: CupertinoActivityIndicator(radius: 18));
  },
)