Flutter 入門與實戰（二十八）：Dio 封裝之金屋藏嬌

本文已參與好文召集令活動，點擊查看：後端、大前端雙賽道投稿，2萬元獎池等你挑戰！」

楔子

有這麼一個純屬虛構的故事，說小王在成爲老王以前，爲人處事很謹慎。譬如說，他有了女友，他呢又想讓別人知道本身有女友了，可是又不想讓別人知道本身的女友是誰。很矛盾是吧？這就是小王的謹慎之處，萬一哪天換女友了（說不定換得還挺勤快），不至於被人嘲笑亂來，或者被人稱爲「渣男」。

怎麼辦呢？小王究竟是學過歷史的人，想起了漢武帝劉徹年少時候的「金屋藏嬌」的故事，因而就重演了這個歷史。

小王的女朋友

小王的女朋友年輕漂亮，起了個英文名字叫「Dio」，聽說是 pub 上的交際花，你們基本上相互聯絡都靠她。小王很低調，不想讓別人知道她的女朋友是 Dio，因而對外只說本身有女友，而且對外宣稱這個女友叫作 HttpUtil。目前HttpUtil其實就是披了外衣的 Dio，可是哪天小王換成別的女朋友了，別人也看不出來——由於從外面看，都是叫 HttpUtil。小王暗地裏稱之爲：Dio 之金屋藏嬌。

小王利用HttpUtil向外面展現了 Dio 的交際能力，譬如Get、Put、Post、Patch、Delete 和 Upload。這樣小王頗有面子，由於你們都以爲小王的女友很厲害——雖然沒有見過面。不少年之後，小王變成老王后，老王的兒子僱傭了一批程序員，才知道程序員早就發明了這種技巧，還取了個專門的術語，叫作封裝。

HttpUtil

最開始的時候，小王的HttpUtil長這樣。可是發現介紹女友的每個交際能力都得吧啦吧啦講一堆如何處理交際過程的尷尬場面（異常），也太麻煩了！

class HttpUtil {
  static Dio _dioInstance;
  static Dio getDioInstance() {
    if (_dioInstance == null) {
      _dioInstance = Dio();
    }

    return _dioInstance;
  }

  static Future get(String url, {Map<String, dynamic> queryParams}) async {
    try{
      return await HttpUtil.getDioInstance().get(url, queryParameters: queryParams);
    } on DioError catch (e) {
      EasyLoading.showError(e.message);
    } on Exception catch (e) {
      EasyLoading.showError(e.toString());
    }
  }
  
  //...
}
複製代碼

小王省事，作了一次改進，把全部的能力都經過另外一個方式一塊兒講，這樣講的時候把所有技能都一遍的時候，只須要介紹一次如何處理尷尬場面就行了，畢竟尷尬場面的處理都是差很少的。首先，小王如數家珍似的定義了女友的能力。

enum HttpMethod {
  GET,
  PUT,
  POST,
  PATCH,
  DELETE,
  UPLOAD,
}
複製代碼

接着，定義了他介紹女友的話術：

static Future sendRequest(HttpMethod method, String url,
      {Map<String, dynamic> queryParams, dynamic data}) async {
  try {
    switch (method) {
      case HttpMethod.GET:
        return await HttpUtil.getDioInstance()
            .get(url, queryParameters: queryParams);
      case HttpMethod.PUT:
        return await HttpUtil.getDioInstance()
            .put(url, queryParameters: queryParams, data: data);
      case HttpMethod.POST:
        return await HttpUtil.getDioInstance()
            .post(url, queryParameters: queryParams, data: data);
      case HttpMethod.PATCH:
        return await HttpUtil.getDioInstance()
            .patch(url, queryParameters: queryParams, data: data);
      case HttpMethod.DELETE:
        return await HttpUtil.getDioInstance()
            .delete(url, queryParameters: queryParams, data: data);
      default:
        EasyLoading.showError('請求方式錯誤');
    }
  } on DioError catch (e) {
    EasyLoading.showError(e.message);
  } on Exception catch (e) {
    EasyLoading.showError(e.toString());
  }

  return null;
}
複製代碼

這個時候，再來介紹某一項能力就輕鬆多了。

static Future get(String url, {Map<String, dynamic> queryParams}) async {
    return await sendRequest(HttpMethod.GET, url, queryParams: queryParams);
  }

static Future put(String url,
    {Map<String, dynamic> queryParams, dynamic data}) async {
  return await sendRequest(HttpMethod.PUT, url,
      queryParams: queryParams, data: data);
}

static Future post(String url,
    {Map<String, dynamic> queryParams, dynamic data}) async {
  return await sendRequest(HttpMethod.POST, url,
      queryParams: queryParams, data: data);
}

static Future patch(String url,
    {Map<String, dynamic> queryParams, dynamic data}) async {
  return await sendRequest(HttpMethod.PATCH, url,
      queryParams: queryParams, data: data);
}

static Future delete(String url,
    {Map<String, dynamic> queryParams, dynamic data}) async {
  return await sendRequest(HttpMethod.DELETE, url,
      queryParams: queryParams, data: data);
}

static Future uploadSingle(String url, String fileKey, File file,
    {Map<String, dynamic> queryParams}) async {
  FormData formData = FormData.fromMap({
    fileKey: await MultipartFile.fromFile(file.path),
  });
  return await sendRequest(HttpMethod.POST, url,
      queryParams: queryParams, data: formData);
}
複製代碼

外面的世界

一切就緒，小王開始切斷了女友 Dio 與外界的聯繫，今後外面的世界的人只知道小王有個女友，代號叫 HttpUtil，至於究竟是誰，長得怎麼樣，全靠小王的一張嘴了！好比DynamicService這位同窗：

import '../utils/http_util.dart';

class DynamicService {
  static String host = 'http://localhost:3900/api/';
  static Future list(page, pageSize) async {
    var result = await HttpUtil.get(
      host + 'dynamics',
      queryParams: {'page': page, 'pageSize': pageSize},
    );

    return result;
  }

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

    return result;
  }

  static Future post(Map<String, dynamic> data) async {
    var result = await HttpUtil.post(host + 'dynamics', data: data);

    return result;
  }

  static Future updateAll(String id, Map<String, dynamic> data) async {
    var result = await HttpUtil.put(host + 'dynamics/' + id, data: data);

    return result;
  }

  static Future update(String id, Map<String, dynamic> data) async {
    var result = await HttpUtil.patch(host + 'dynamics/' + id, data: data);

    return result;
  }

  static Future updateViewCount(String id) async {
    var result = await HttpUtil.patch(host + 'dynamics/view/' + id);

    return result;
  }

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

    return result;
  }
}
複製代碼

再好比 DynamicAdd 這位同窗：

//...
var response = await DynamicService.post(newFormData);
if (response != null && response.statusCode == 200) {
  Dialogs.showInfo(context, '添加成功');
  GetIt.instance
      .get<DynamicListener>()
      .dynamicAdded(DynamicEntity.fromJson(response.data));
  Navigator.of(context).pop();
} else {
  Dialogs.showInfo(this.context,
      response?.statusMessage != null ? response.statusMessage : '添加失敗');
}
//...
複製代碼

結局

小王給外面人的形象是愈發神祕了，你們都想見見小王的能幹女朋友，但是每次小王講的都是 HttpUtil，而他本身呢也很滿意本身的這個「金屋藏嬌」的主意，直到有一天他成爲老王后，他家的兒子——新的小王給他捅了簍子。

——未完待續

知識點梳理

• 封裝：對於第三方插件，咱們不排除之後可能會更換，所以最好的方式是將第三方插件進行封裝，隱藏具體的實現細節，這樣假設咱們之後須要更換插件，只須要該封裝類便可，而不是讓第三方插件散落在各個模塊裏，這樣改起來很是痛苦，並且容易遺漏。——譬如咱們將以前的網絡請求代碼更改，就須要一個個文件修改。
• async/await 補充：調用網絡請求時，使用 await 會等待結果返回，若是不使用await的話，會出現異步執行狀況，結果就是異常捕獲代碼不起做用。你們能夠試一下，在HttpUtil取消 await後，將後臺服務中止的效果。

源碼已上傳至Dio 封裝源代碼