Flutter 異常處理之圖片篇

時間  2019-11-18
標籤 flutter 異常 處理 圖片 简体版
原文   原文鏈接

背景

說到異常處理，你可能直接會認爲不就是 try-catch 的事情，至於寫一篇文章單獨來講明嗎？網絡

若是你是這麼想的，那麼本篇說不定會給你驚喜哦~less

並且本篇聚焦在圖片的異常處理。async

場景

學以至用，有具體的應用場景，可以加深咱們對知識的掌握。ide

咱們以簡書的文章列表爲例，以下圖：學習

假設產品有這樣的需求，當右邊的封面圖加載失敗的時候，用一個默認圖片替換或者直接讓文本橫向填充原有圖片位置。測試

無論處理方式是怎樣，首先咱們要作的就是可以知道圖片加載失敗。ui

如何獲知圖片加載失敗呢？下面咱們經過 Flutter 自帶網絡加載 API 和一個第三方網絡庫來進行對比說明。this

Image.network

咱們看下源碼，以下：url

Image.network(String src, {
    Key key,
    double scale = 1.0,
    this.semanticLabel,
    this.excludeFromSemantics = false,
    this.width,
    this.height,
    this.color,
    this.colorBlendMode,
    this.fit,
    this.alignment = Alignment.center,
    this.repeat = ImageRepeat.noRepeat,
    this.centerSlice,
    this.matchTextDirection = false,
    this.gaplessPlayback = false,
    this.filterQuality = FilterQuality.low,
    Map<String, String> headers,
  }) : image = NetworkImage(src, scale: scale, headers: headers),
       assert(alignment != null),
       assert(repeat != null),
       assert(matchTextDirection != null),
       super(key: key);

能夠看到只有 src 是必填參數，所以咱們給出 src 爲不一樣值的狀況。.net

1.一個圖片的 url

Widget _buildWidget() {
    return Image.network('https://upload-images.jianshu.io/upload_images/5361063-e413832da0038304.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/800');
  }

可以正常顯示以下圖：

2.不可訪問 url，如隨便一個字符串 test

Widget _buildWidget() {
    return Image.network('test');
  }

終端報錯以下：

flutter: ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
flutter: The following ArgumentError was thrown resolving an image codec:
flutter: Invalid argument(s): No host specified in URI file:///test

模擬器顯示空白。

這種場景假設咱們要捕獲異常，增長 try-catch，以下：

Widget _buildWidget() {
    try {
      return Image.network('test');
    } catch (e) {
      print('enter catch exception start');
      print(e);
      print('enter catch exception end');
      return Container();
    }
  }

依然無法捕獲

3.可訪問非圖片 url，好比 http://mp.weixin.qq.com/mp/homepage?__biz=MzI3OTAyNzAwNg==&hid=5&sn=7e4598d8b00537fe2846f2e85d746b9a&scene=18#wechat_redirect

Widget _buildWidget() {
    try {
      return Image.network('http://mp.weixin.qq.com/mp/homepage?__biz=MzI3OTAyNzAwNg==&hid=5&sn=7e4598d8b00537fe2846f2e85d746b9a&scene=18#wechat_redirect');
    } catch (e) {
      print('enter catch exception start');
      print(e);
      print('enter catch exception end');
      return Container();
    }
  }

控制檯拋出以下異常

[VERBOSE-2:codec.cc(97)] Failed decoding image. Data is either invalid, or it is encoded using an unsupported format.
flutter: ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
flutter: The following _Exception was thrown resolving an image codec:
flutter: Exception: operation failed

能夠看到 try-catch 同樣無法生效。沒有打印相關日誌。

cached_network_image

這是一個第三方開發的網絡庫，pub 地址爲 https://pub.dartlang.org/packages/cached_network_image

由於項目有用到這個庫，因此用這個來舉例，並非爲其打廣告，至於你實際開發是否用這個庫，仍是有其餘更好的庫，須要你本身去評估。

由於這個是項目組 iOS 同事選擇的，我這邊並無深刻研究過。

咱們仿照上面的依次執行 3 種 case。

1.一個圖片的 url

Widget _buildWidget() {
    return Image(image: new CachedNetworkImageProvider('https://upload-images.jianshu.io/upload_images/5361063-e413832da0038304.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/800'));
  }

可以正常顯示以下圖：

2.不可訪問 url，如隨便一個字符串 test

Widget _buildWidget() {
    return Image(image: new CachedNetworkImageProvider('test'));
  }

終端報錯以下：

flutter: ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
flutter: The following message was thrown resolving an image codec:
flutter: Couldn't download or retrieve file.

模擬器顯示空白。

這種場景假設咱們要捕獲異常，增長 try-catch，以下：

Widget _buildWidget() {
    try {
      return Image(image: new CachedNetworkImageProvider('test'));
    } catch (e) {
      print('enter catch exception start');
      print(e);
      print('enter catch exception end');
      return Container();
    }
  }

依然無法捕獲。

可是咱們經過其自帶的錯誤回調，以下：

Widget _buildWidget() {
    return Image(
        image: new CachedNetworkImageProvider(
            'test',
            errorListener: () {
              print('enter errorListener');
            }
        )
    );
  }

能夠看到控制檯進入了 errorListener，打印了對應日誌。

雖然 Flutter 自帶的錯誤日誌依然輸出了，可是經過 errorListener 咱們能夠得到這種異常狀況。

flutter: enter errorListener
flutter: ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
flutter: The following message was thrown resolving an image codec:
flutter: Couldn't download or retrieve file.

3.可訪問非圖片 url，好比 http://mp.weixin.qq.com/mp/homepage?__biz=MzI3OTAyNzAwNg==&hid=5&sn=7e4598d8b00537fe2846f2e85d746b9a&scene=18#wechat_redirect

Widget _buildWidget() {
    return Image(
        image: new CachedNetworkImageProvider(
            'http://mp.weixin.qq.com/mp/homepage?__biz=MzI3OTAyNzAwNg==&hid=5&sn=7e4598d8b00537fe2846f2e85d746b9a&scene=18#wechat_redirect',
            errorListener: () {
              print('enter errorListener');
            }
        )
    );
  }

運行，控制檯會報錯，而且無法捕獲，控制檯輸出以下：

[VERBOSE-2:codec.cc(97)] Failed decoding image. Data is either invalid, or it is encoded using an unsupported format.
flutter: ══╡ EXCEPTION CAUGHT BY IMAGE RESOURCE SERVICE ╞════════════════════════════════════════════════════
flutter: The following _Exception was thrown resolving an image codec:
flutter: Exception: operation failed

使用 try-catch 也是同樣，這裏就不贅餘了。

圖片通用異常捕獲處理

經過上面的學習，咱們能夠發現無論是 Image.network 仍是 cached_network_image 無法覆蓋全上面兩種異常的捕獲處理。

不過這兩個的共同點就是他們都返回 Image。

因此對於圖片的異常捕獲可使用下面通用模板：

//    Image image = Image(image: new CachedNetworkImageProvider(''));
Image image = Image.network('');
final ImageStream stream = image.image.resolve(ImageConfiguration.empty);
stream.addListener((_, __) {}, onError: (dynamic exception, StackTrace stackTrace) {
  //TODO error callback
});

這裏首先是得到 Image，若是得到的是 ImageProvider，只須要把 image.image 換爲你的 ImageProvider 便可，固然這個筆者沒測試，只是看源碼上面模板 image.image 的類型是 ImageProvider。

addListener 有兩個回調，其中成功回調是必填的，有兩個參數，由於這裏不須要用到，所以第一個參數是一個下劃線，第二個參數是兩個下劃線。可能你會說不須要用到，可不能夠直接填 null。不行，這邊測試了，填 null 當圖片加載成功時控制檯會拋異常。因此提供一個不須要任何實現的回調便可。

錯誤回調是可選的，由於咱們本篇的主題就是要獲取錯誤回調，因此這裏提供了實現。

針對咱們上面的 3 個例子，咱們看看通用模板是否能夠所有捕獲。

1.一個圖片的 url

Widget _buildWidget() {
  Image image = Image.network('https://upload-images.jianshu.io/upload_images/5361063-e413832da0038304.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/800');
  final ImageStream stream = image.image.resolve(ImageConfiguration.empty);
  stream.addListener((_,__){}, onError: (dynamic exception, StackTrace stackTrace) {
    print('enter onError start');
    print(exception);
    print(stackTrace);
    print('enter onError end');
  });
  return image;
}

圖片加載成功。

2.不可訪問 url，如隨便一個字符串 test

Widget _buildWidget() {
  Image image = Image.network('test');
  final ImageStream stream = image.image.resolve(ImageConfiguration.empty);
  stream.addListener((_,__){}, onError: (dynamic exception, StackTrace stackTrace) {
    print('enter onError start');
    print(exception);
    print(stackTrace);
    print('enter onError end');
  });
  return image;
}

控制檯輸出以下：

flutter: enter onError start
flutter: Invalid argument(s): No host specified in URI file:///test
flutter: #0      _HttpClient._openUrl (dart:_http/http_impl.dart:2121:9)
#1      _HttpClient.getUrl (dart:_http/http_impl.dart:2056:48)
#2      NetworkImage._loadAsync (package:flutter/src/painting/image_provider.dart:486:57)
<asynchronous suspension>
#3      NetworkImage.load (package:flutter/src/painting/image_provider.dart:471:14)
#4      ImageProvider.resolve.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:267:86)
#5      ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:143:20)
#6      ImageProvider.resolve.<anonymous closure> (package:flutter/src/painting/image_provider.dart:267:63)
#7      SynchronousFuture.then (package:flutter/src/foundation/synchronous_future.dart:38:29)
#8      ImageProvider.resolve (package:flutter/src/painting/image_provider.dart:265:30)
#9      MyApp._buildWidget (package:my_flutter/main.dart:20:42)
#10     MyApp.build (package:my_flutter/main.dart:12:18)
#11     StatelessElement.build (package:flutter/<…>
flutter: enter onError end

能夠看到確實進入錯誤回調了。

3.可訪問非圖片 url，好比 http://mp.weixin.qq.com/mp/homepage?__biz=MzI3OTAyNzAwNg==&hid=5&sn=7e4598d8b00537fe2846f2e85d746b9a&scene=18#wechat_redirect

Widget _buildWidget() {
  Image image = Image.network('http://mp.weixin.qq.com/mp/homepage?__biz=MzI3OTAyNzAwNg==&hid=5&sn=7e4598d8b00537fe2846f2e85d746b9a&scene=18#wechat_redirect');
  final ImageStream stream = image.image.resolve(ImageConfiguration.empty);
  stream.addListener((_,__){}, onError: (dynamic exception, StackTrace stackTrace) {
    print('enter onError start');
    print(exception);
    print(stackTrace);
    print('enter onError end');
  });
  return image;
}

控制檯輸出以下：

[VERBOSE-2:codec.cc(97)] Failed decoding image. Data is either invalid, or it is encoded using an unsupported format.
flutter: enter onError start
flutter: Exception: operation failed
flutter: #0      NetworkImage._loadAsync (package:flutter/src/painting/image_provider.dart:498:12)
<asynchronous suspension>
#1      NetworkImage.load (package:flutter/src/painting/image_provider.dart:471:14)
#2      ImageProvider.resolve.<anonymous closure>.<anonymous closure> (package:flutter/src/painting/image_provider.dart:267:86)
#3      ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:143:20)
#4      ImageProvider.resolve.<anonymous closure> (package:flutter/src/painting/image_provider.dart:267:63)
#5      SynchronousFuture.then (package:flutter/src/foundation/synchronous_future.dart:38:29)
#6      ImageProvider.resolve (package:flutter/src/painting/image_provider.dart:265:30)
#7      MyApp._buildWidget (package:my_flutter/main.dart:20:42)
#8      MyApp.build (package:my_flutter/main.dart:12:18)
#9      StatelessElement.build (package:flutter/src/widgets/framework.dart:3774:28)
#10     ComponentElement.performRebuild (package:flutter/src/widgets/framework.dart:3721:15<…>
flutter: enter onError end

能夠看到確實進入錯誤回調了。

更多閱讀：

Flutter 入門系列博客
Flutter & Dart

最後來一個彩蛋表情包：

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程