Flutter 利用 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