Flutter入門與實戰（二十三）：利用 Dio請求刪除數據

前言

Dio 系列文章第二篇，以前一篇講述了 Dio 的基本介紹和獲取列表數據的實例，文章連接以下：

• 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) {
  // 其餘異常處理
}
複製代碼

運行效果

運行效果以下圖（第二張爲捕獲異常的狀況）：

源碼

源碼地址：gitee.com/island-code…