Loading...
墨滴

岛上码农@公众号同名

2021/10/19  阅读:39  主题:橙心

利用 Dio 完成数据删除操作

前言

本篇介绍如何使用 Dio 提供的 delete 方法对接后台的删除接口。调试前需要启动后台工程,参考上一篇文章,运行后台应用(同时应准备好后台数据库数据)。

界面交互

我们需要实现长按弹出列表元素来进行删除操作,界面实现不是本篇的重点,上 pub 找了一个 FocusedMenu 来实现。FocusedMenu 实现比较简单,我们只需要将列表元素使用 FocusedMenuHolder 包裹起来即可:

// dynamic_item.dart

@override
Widget build(BuildContext context) {
  return FocusedMenuHolder(
    child: Container(
      // 省略原列表元素构建代码
    ),
    onPressed: () {
      // 点击事件
      _handlePressed(context);
    },
    // 长按菜单
    menuItems: <FocusedMenuItem>[
      FocusedMenuItem(
          title: Text("查看详情"),
          trailingIcon: Icon(Icons.remove_red_eye_outlined),
          onPressed: () {
            _handlePressed(context);
          }),
      FocusedMenuItem(
        title: Text("取消"),
        trailingIcon: Icon(Icons.cancel),
        onPressed: () {},
      ),
      FocusedMenuItem(
          title: Text(
            "删除",
            style: TextStyle(color: Colors.redAccent),
          ),
          trailingIcon: Icon(
            Icons.delete,
            color: Colors.redAccent,
          ),
          onPressed: () {
            handleDelete(dynamicEntity.id);
          }),
    ],
  );
}

关键是长按菜单的配置,配置对应的菜单名称、图标、响应事件即可。这里的 handleDelete 方法从列表页面传递过来,接收一个列表元素的 id,以便在列表页面处理删除的逻辑。

网络请求删除实现

dynamic_service.dart 中增加一个删除方法,用于网络请求删除,如下所示:

static Future delete(String id) async {
  var result = await Dio().delete(
    host + 'dynamics/' + id,
  );

  return result;
}

方法很简单,只需要调用 Dio 实例的删除方法,将需要删除的 id 拼接上 url 地址即可。

对应的调用的业务代码如下,当点击弹出菜单的删除按钮时调用该方法。该方法如果删除成功(状态码200),则从当前列表中移除该元素,并刷新状态更新界面;如果失败(状态码为其他),则通过 SnackBar 显示错误信息。

void _onItemDelete(String id) async {
    try {
      var response = await DynamicService.delete(id);
      if (response.statusCode == 200) {
        setState(() {
          _listItems.removeWhere((element) => element.id == id);
        });
      } else {
        _showErrorInfo(this.context, response.statusMessage);
      }
    } on DioError catch (e) {
      _showErrorInfo(this.context, e.message);
    } catch (e) {
      _showErrorInfo(this.context, e.toString());
    }
  }

这里首先是使用了一个 try...catch 包裹了网络请求,这是因为后台可能发生异常,例如数据已经被删除了,后台存在 bug 等等。目前我们还没有做统一对 Dio的异常进行处理,因此为了防止后台异常导致应用崩溃有必要做异常捕获。实际可以传一个虚拟的 id 验证异常,会发现Dio 会抛出一个 DioError 错误出来,这里我们可以向用户提示错误信息。

顺带讲一下 Dart 的异常捕获形式,可以看到有个on关键字,这里可以使用多个 on 来匹配不同的异常。形式如下,其中catch的第二个参数是堆栈信息。

try {
  // ...
on ExceptionType1 catch (e) {
  // ExceptionType1异常处理
on ExceptionType2 catch (e) {
  // ExceptionType2异常处理
catch (e,s) {
  // 其他异常处理
}

运行效果

运行效果如下图(第二张为捕获异常的情况):

删除成功
删除成功
删除失败
删除失败

源码

源码地址:https://gitee.com/island-coder/flutter-beginner/tree/master/network

关注岛上码农
关注岛上码农

岛上码农@公众号同名

2021/10/19  阅读:39  主题:橙心

作者介绍

岛上码农@公众号同名