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

島上碼農發表於2021-07-03
Flutter

前言

Dio 系列文章第二篇，之前一篇講述了 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) {
  // 其他異常處理
}
複製程式碼

執行效果

執行效果如下圖（第二張為捕獲異常的情況）：

螢幕錄製2021-07-03 上午11.32.48.gif螢幕錄製2021-07-03 上午11.37.35.gif

原始碼

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

相關文章