前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter | 定义一个通用的多功能网络请求 Widget

Flutter | 定义一个通用的多功能网络请求 Widget

作者头像
Flutter笔记
发布2019-10-08 15:43:45
1.7K0
发布2019-10-08 15:43:45
举报
文章被收录于专栏:Flutter笔记

首先道个歉,最近公司很忙,又赶上十一假期,所以鸽了将近半个月。

不过,后续还是会每周最少更新两篇的!

那说起网络请求的控件,我们首先是不是会想起 FutureBuilder

FutureBuilder 给我们封装好了网络请求中的各种状态。

如果没有了解过,那么可以看我这篇文章:Flutter - FutureBuilder 异步UI神器。

这篇文章是早期写的,有些地方写的有些问题,但不重要!主要了解一下 FutureBuilder 的状态就可以了。

本篇文章中只是提供一种思路,欢迎一起探讨,也欢迎不吝赐教!

效果如下。

首先是没有开启服务的情况:

可以看到全部都是错误的信息,

然后开启服务:

1. 先定义一个通用的网络请求

那既然是网络请求,那首先我们要定义一个通用的网络请求方法。

每一家后台 API 的风格都不一样,有的是 RSETful,有的是我们最熟悉的 GET、POST。

这里就以 GET 为例,API 接口为 GitHub - 网易云音乐 Node.js API service。 [1]

网络请求使用的是 Dio,先创建一个 NetUtils.dart

初始化代码:

代码语言:javascript
复制
static Dio _dio;

static void init() async {
  Directory tempDir = await getTemporaryDirectory();
  String tempPath = tempDir.path;
  CookieJar cj = PersistCookieJar(dir: tempPath);
  _dio = Dio(BaseOptions(baseUrl: 'http://127.0.0.1:3000'))
    ..interceptors.add(CookieManager(cj))
    ..interceptors.add(LogInterceptor(responseBody: true, requestBody: true));
}

在 runApp 前面调用即完成初始化。

接着定义一个通用的网络请求:

代码语言:javascript
复制
static Future<Response> _get(
  BuildContext context,
  String url, {
    Map<String, dynamic> params,
  }) async {
  Loading.showLoading(context);
  try {
    return await _dio.get(url, queryParameters: params);
  } on DioError catch (e) {
    if (e.response is Map) {
      return Future.value(e.response);
    } else {
      return Future.error(0);
    }
  } finally {
    Loading.hideLoading(context);
  }
}

这里代码很简单,方法需要传入三个参数:

1.context:用于 showLoading2.url:API 地址3.params:该网络请求的参数,可以为空

方法内部我们捕获了 DioError,然后判断接口是否还返回了正常的内容。

例如:状态码不为2xx,但是仍然返回了数据,这样 Dio 是会抛出 DioError 的,需要我们自己捕获来处理。

如果返回了正常的数据,那我们还是返回回去,如果不是正常的数据,则直接抛出 Future.error(0)

使用该通用方法:

代码语言:javascript
复制
/// 新碟上架
static Future<AlbumData> getAlbumData(
  BuildContext context, {
    Map<String, dynamic> params = const {
      'offset': 0,
      'limit': 10,
    },
  }) async {
  var response = await _get(context, '/top/album', params: params);
  return AlbumData.fromJson(response.data);
}

我们就可以像这样来使用刚才定义好的方法,也方便我们后续定义一个通用的 FutureBuilder

2. 确认网络请求控件所需要的功能

我们从最开始的图中明显能看出来的,其实是有三个功能:

1.请求数据并显示 Loading2.正常时返回正常数据,错误时返回错误 Widget3.错误 Widget 可以点击重新请求

然鹅,细心的同学也发现问题了。

我们在网络请求中添加了一个 Loading,而且需要一个 BuildContext。

我们都知道,是不能在 initState() 方法中去使用这个 BuildContext 的。

所以,我们还要进行一个 第一帧回调

代码语言:javascript
复制
@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((call) {
    _request();
  });
}

这样就完成了我们的需求调研。

3. 编写通用网络请求控件

说的是一个通用的网络请求控件,其实就是把 FutureBuilder 封装一层。

请求数据并显示 Loading

但是,这里也有一个问题:

我们在最开始定义网络请求工具类的时候,每一个网络请求都是一个方法,而每个方法中都有或者没有参数。

我们也知道,FutureBuilder 需要传入一个 Future,那这可怎么办?

而且我们不能在使用该控件的时候调用网络请求方法,因为网络请求中封装了一个 Loading,这个 Loading 需要 BuildContext

既然如此,那我们只能传入方法(Function)了:

代码语言:javascript
复制
typedef ValueWidgetBuilder<T> = Widget Function(
  BuildContext context,
  T value,
);


final ValueWidgetBuilder<T> builder;
final Function futureFunc;
final Map<String, dynamic> params;

CustomFutureBuilder({
  @required this.futureFunc,
  @required this.builder,
  this.params,
});

这样,我们就可以在 第一帧回调 中来调用该网络请求了,这样一举两得:

既不用在使用该控件的时候调用方法,又避免了 Loading 使用 BuildContext 报错的问题。

代码语言:javascript
复制
Future<T> _future;

@override
void initState() {
  super.initState();
  WidgetsBinding.instance.addPostFrameCallback((call) {
    _request();
  });
}

void _request() {
  setState(() {
    if (widget.params == null)
      _future = widget.futureFunc(context);
    else
      _future = widget.futureFunc(context, params: widget.params);
  });
}

首先我们定义了一个 Future,然后在 第一帧回调 中初始化该 Future 就可以了。

正常时返回正常数据,错误时返回错误 Widget

这就需要我们封装好的网络请求和 FutureBuilder 有一个互动了,

网络请求的逻辑如下:

这样正好就可以对应 FutureBuilder 的几种状态:

1.网络请求 -> ConnectionState.noneConnectionState.waiting2.显示Loading -> ConnectionState.active3.请求结束 -> ConnectionState.done4.是否有数据(无论对错)-> snapshot.hasData5.抛出错误 -> snapshot.hasError

了解这些之后,我们就可以写出代码:

代码语言:javascript
复制
  Widget build(BuildContext context) {
    return _future == null
        ? Container(
            alignment: Alignment.center,
            height: ScreenUtil().setWidth(200),
            child: CupertinoActivityIndicator(),
          )
        : FutureBuilder(
            future: _future,
            builder: (context, snapshot) {
              switch (snapshot.connectionState) {
                case ConnectionState.none:
                case ConnectionState.waiting:
                case ConnectionState.active:
                  return Container(
                    alignment: Alignment.center,
                    height: ScreenUtil().setWidth(200),
                    child: CupertinoActivityIndicator(),
                  );
                case ConnectionState.done:
                  if (snapshot.hasData) {
                    return widget.builder(context, snapshot.data);
                  } else if (snapshot.hasError) {
                    return NetErrorWidget(
                      callback: () {
                        _request();
                      },
                    );
                  }
              }
              return Container();
            },
          );
  }

首先判断 _future 是否为 null,如果为空,那么则表示还没有初始化该 Future,

个人建议这个时候返回自己定义好的加载中 Widget,因为后续在网络请求中的时候也返回该 Widget,这样不会显得乱。

然后在 ConnectionState.done 中判断是否存在数据,如果有的话,就显示传进来的 Widget。

如果返回错误,则返回错误的 Widget。

错误 Widget 可以点击重新请求

这个逻辑其实很简单,在我最开始说的文章中有讲解一部分。

那就是什么时候 FutureBuilder 会重新创建?

代码语言:javascript
复制
@override
void didUpdateWidget(FutureBuilder<T> oldWidget) {
  super.didUpdateWidget(oldWidget);
  if (oldWidget.future != widget.future) {
    if (_activeCallbackIdentity != null) {
      _unsubscribe();
      _snapshot = _snapshot.inState(ConnectionState.none);
    }
    _subscribe();
  }
}

可以很清晰的看到,在两次 Future 不一样的情况下会重新走一遍流程。否则是不会走的。

而我们在上面也已经定义好了,因为传进来的是 Function 和 Params,我们可以随时重新创建该 Future:

代码语言:javascript
复制
void _request() {
  setState(() {
    if (widget.params == null)
      _future = widget.futureFunc(context);
    else
      _future = widget.futureFunc(context, params: widget.params);
  });
}

错误 Widget 的点击事件写成这个就 ok 了,这样就重新创建了该 FutureBuilder,也就是重新请求了。

本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2019-10-08,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 Flutter笔记 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 1. 先定义一个通用的网络请求
  • 2. 确认网络请求控件所需要的功能
  • 3. 编写通用网络请求控件
    • 请求数据并显示 Loading
      • 正常时返回正常数据,错误时返回错误 Widget
        • 错误 Widget 可以点击重新请求
        领券
        问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档