Flutter 异常处理之图片篇

Imfan 发布于2019-04-23 15:07 / 2096人阅读

摘要：不管处理方式是怎样，首先我们要做的就是能够知道图片加载失败。图片通用异常捕获处理通过上面的学习，我们可以发现不管是还是没法覆盖全上面两种异常的捕获处理。

背景

说到异常处理，你可能直接会认为不就是 try-catch 的事情，至于写一篇文章多带带来说明吗？

如果你是这么想的，那么本篇说不定会给你惊喜哦~

而且本篇聚焦在图片的异常处理。

场景

学以致用，有具体的应用场景，能够加深我们对知识的掌握。

我们以简书的文章列表为例，如下图：

假设产品有这样的需求，当右边的封面图加载失败的时候，用一个默认图片替换或者直接让文本横向填充原有图片位置。

不管处理方式是怎样，首先我们要做的就是能够知道图片加载失败。

如何获知图片加载失败呢？下面我们通过 Flutter 自带网络加载 API 和一个第三方网络库来进行对比说明。

Image.network

我们看下源码，如下：

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 headers,
  }) : image = NetworkImage(src, scale: scale, headers: headers),
       assert(alignment != null),
       assert(repeat != null),
       assert(matchTextDirection != null),
       super(key: key);

可以看到只有 src 是必填参数，因此我们给出 src 为不同值的情况。

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)

#3      NetworkImage.load (package:flutter/src/painting/image_provider.dart:471:14)
#4      ImageProvider.resolve.. (package:flutter/src/painting/image_provider.dart:267:86)
#5      ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:143:20)
#6      ImageProvider.resolve. (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)

#1      NetworkImage.load (package:flutter/src/painting/image_provider.dart:471:14)
#2      ImageProvider.resolve.. (package:flutter/src/painting/image_provider.dart:267:86)
#3      ImageCache.putIfAbsent (package:flutter/src/painting/image_cache.dart:143:20)
#4      ImageProvider.resolve. (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

最后来一个彩蛋表情包：

私有云 idc机房托管之基础篇异常处理异常异常处理未处理异常

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/2364.html

Flutter是跨平台开发终极之选吗？Android开发该如何快速上手Flutter？

摘要：月日，谷歌正式发布了的。到底能不能成为跨平台开发终极之选是基于前端诞生的，但是对前端开发来说，的环境配置很麻烦，需要原生的平台知识，还要担心遇上网络问题。现在已经不是曾经的小众框架，这两年里它已经逐步成长为主流的跨平台开发框架之一。 ...

luckyyulin 2021-09-07 09:59 评论0 收藏0
flutter的入门实践到可开发

摘要：继上一篇关于的介绍，是仿照微信界面，因为作为前端开发，有一定的基础，所有写起来，也不是很吃力。班门弄斧之作，若有大神见到，敬请指教，有不对不合理之处，敬请指出我是迩伶贰环境准备以系统为例。 flutter的入门记录 0.前言： flutter 的入门demo 已经写好一个星期了，只不过一直都没有整理出博客来。收拾好心情，来整理一下。继上一篇关于react-native-wx的介绍，是仿...

_DangJin 2019-06-26 18:06 评论0 收藏0
前端每周清单第 56 期: D3 5.0，深入 React 事件系统，SketchCode 界面生成

摘要：雅虎从很早就开始招聘和培养研究型人才，雅虎研究院就是在这个过程中应运而生的。今天我就来说一说雅虎研究院的历史，以及过去十多年间取得的成就，聊一聊如何通过引进高级人才，迅速构建起一支世界级的研发团队。 showImg(https://segmentfault.com/img/remote/1460000013995512); 作者：王下邀月熊编辑：徐川前端每周清单专注大前端领域内容，...

lavnFan 2019-08-22 15:45 评论0 收藏0
计划在2021年进行响应式开发？但不确定应该选择哪种技术来快速且低成本的开发应用程序？一文给你解决问

摘要：与此同时，因新冠疫情的影响使得用户对移动应用程序的需求激增。调查报告显示年移动应用程序已经产生了亿美元的收入，预计到年将产生亿美元的收入。引言计划在2021年进...

Codeing_ls 2021-09-08 09:36 评论0 收藏0
优秀文章收藏（慢慢消化）持续更新~

摘要：整理收藏一些优秀的文章及大佬博客留着慢慢学习原文协作规范中文技术文档协作规范阮一峰编程风格凹凸实验室前端代码规范风格指南这一次，彻底弄懂执行机制一次弄懂彻底解决此类面试问题浏览器与的事件循环有何区别笔试题事件循环机制异步编程理解的异步 better-learning 整理收藏一些优秀的文章及大佬博客留着慢慢学习原文:https://www.ahwgs.cn/youxiuwenzhan...

JeOam 2019-08-23 18:24 评论0 收藏0