Flutter 入门指北(Part 13)之网络

kuky_xs
1,472 阅读3分钟

该文已授权公众号 「码个蛋」，转载请指明出处

前面讲完了常用的部件，BLoC 模式，数据持久化等常用的，今天再介绍个重头戏 —— 网络请求

HttpClient

HttpClient 是 dart 自带的网络请求方式，在 dart:io 包下。使用 HttpClient 作为请求分以下几个步骤

  1. 创建 HttpClient 实例

    HttpClient client = HttpClient();

  2. 打开连接，并设置一些头参数，请求参数等

    // 如果 url 中没有查询参数可直接创建
Uri uri = Uri.parse('https://www.xxx.com');
// 如果存在查询参数则在 Uri 中添加
Uri uri = Uri(scheme: 'https', host: 'www.xxx.com', queryParameters: {'a': 'AAA'});
// 打开连接
HttpClientRequest request = await client.getUrl(uri);
request.headers.add('token', 'Bear ${'x' * 20}'); // 添加头部 token 信息
// 如果是 post 或者 put 请求，通过 `add` 添加请求体
// 因为 `add` 方法需要传入 `List<int>` 参数，可以通过 utf8.encode 进行编码
request.add(utf8.encode('{"a": "aaa"}'));
// 也可以通过添加流的方式进行添加
request.addStream(input);

  3. 连接服务器

    // 设置 request 后通过 request.close() 获取一个响应对象 HttpClientResponse，
// 包括响应头，响应内容等
HttpClientResponse response = await request.close();

  4. 读取服务器响应内容

    String responseBody = await response.transform(utf8.decoder).join();

  5. 关闭实例

    client.close();

例如我们要去请求 Bird.so 的首页并显示，我们可以这么实现

_httpClientRequest() async {
    HttpClient client;
    // try catch finally 用于捕获请求过程中发生的异常，在 finally 中设置保证 client 能够关闭
    try {
      client = HttpClient();
      HttpClientRequest request = await client.getUrl(Uri.parse(_BIRD_SO_URL));
      HttpClientResponse response = await request.close();
      String strResponse = await response.transform(utf8.decoder).join();
      setState(() => _netBack = strResponse);
    } catch (e) {
      print('${e.toString()}');
      setState(() => _netBack = 'Fail');
    } finally {
      client.close();
    }
  }

最后实现的效果

client.gif

很显然，用 HttpClient 请求相对来说是个非常麻烦的过程，如果要涉及到文本上传之类的，那么就会更麻烦了，所以这边引入一个网络请求的插件 dio，写本文的时候版本为 2.1.0

Dio

dio 是个非常强大的网络请求库，他的方式类似 OkHttp，我们可以直接查看官方文档，使用方式非常简单，创建一个 Dio 实例，然后就可以通过 get，post 等方式发起请求，返回 Future<Response>，而且支持多个并发请求，可以设置返回响应的类型，监听上传下载进度等等，看着就很给力。对于简单的方式，这边就不做太多介绍，主要讲下拦截器，也是非常给力的一部分。比如我们需要请求这么个接口 https://randomuser.me/api/

json.png

这个接口通过 get 请求，可以加入任意的查询参数。比如我们需要实现一个请求加解密的过程，如果每次都在上传参数或者返回请求的时候去加密，解密的话，就做了非常多无用功了，那么这时候拦截器就派上用场了。先定义下加解密的规则，上传的参数统一转为小写，不存在大写，请求回的数据，不能含有 info 字段。看下如何实现

_dioRequest() async {
    BaseOptions options = BaseOptions(connectTimeout: 5000, receiveTimeout: 60000);
    Dio dio = Dio(options);
    
    dio.interceptors.add(InterceptorsWrapper(onRequest: (opt) {
      // 获取查询的参数
      Map params = opt.queryParameters;
      // 将所有的参数转为小写，因为查询参数通过 map 形式上传
      params.forEach((key, value) => 
                       opt.queryParameters[key] = '$value'.toLowerCase());
      // 这边还可以做些别的操作，例如需要 token 进行用户身份验证，则通过头部进行添加
      // opt.headers['authorization'] = 'token';
      // 在官网中，提供了 lock 和 unlock 的写法，被 lock 后，接下来的请求会进入队列等待，
      // 直到 unlock 后才能继续，可以用于几个请求，后续的需要用到前面的返回值的情况使用
        
      // 返回修改后的 RequestOptions
      return opt;
    }, onResponse: (resp) {
      // 返回响应体后，将 info 字段的内容切除，并将 json 拼接完成
      resp.data = '${'${resp.data}'.split(', info').first}}';
      return resp;
    }, onError: (error) {
      // 发生错误时的回调
      return error;
    }));

    // 发送一个请求，可以查看下打印的结果
    Response response = await dio.get(_USER_ME_URL, queryParameters: {'a': 'AAA', 'b': 'BbBbBb'});
    print(response.data);
    print(response.request.headers);
    print(response.request.queryParameters);
    setState(() => _netBack = response.data.toString()); // 界面显示 response.data
  }

看下最后的显示信息

header.png

response.png

请求体的头部成功加上了 authorization 参数，请求的参数全部变为小写，返回的信息也把 info 字段值去除。在很多时候，请求接口后，需要将 json 转换成 pojo 类来处理，可以通过 json_serializable 这个三方插件实现，这边提供文章 Flutter Json自动反序列化，当然这种方式比较麻烦，这里推荐个 Android Studio 下的插件 dart_json_format 直接搜索就可以，如果用的是 Vitual Code 或者别的不是 JetBrains 系列的，这里有个转换的网址 JsonToDart。

以上代码查看 http_main.dart 文件

实践一下下

不知道小伙还记得前面讲的 BLoC 没有，忘了可以查看 Flutter 状态管理及 BLoC，这里结合 BLoC 和 Dio 实现界面和逻辑分离的小例子，接口使用前面提到的 https://randomuser.me/api/ 接口。网络应该是比较常用的，所以对其进行一些封装还是很有必要的，这边提供下我自己封装的方法

import 'package:dio/dio.dart';

// 用于错误信息回调
typedef ErrorCallback = void Function(String msg);

class HttpUtils {
  static const GET = 'get';
  static const POST = 'post';

  static Dio _dio;

  static HttpUtils _instance;

  Dio get hp => _dio;

  // dio 可以在 BaseOptions 中指定域名 baseUrl，
  // 后续接口就不需要再添加域名了
  // 如果请求的接口域名发生了变化，只要把全部 url 写全，就会自动使用新的域名
  HttpUtils._internal(String base) {
    // 生成一个单例，防止多次打开关闭造成开销
    _dio = Dio(BaseOptions(baseUrl: base, connectTimeout: 10000, receiveTimeout: 10000));
  }

  factory HttpUtils(String base) {
    if (_instance == null) _instance = HttpUtils._internal(base);
    return _instance;
  }

  // 添加拦截器
  addInterceptor(List<InterceptorsWrapper> interceptors) {
    _dio.interceptors.clear();
    _dio.interceptors.addAll(interceptors);
  }

  Future<Response<T>> getRequest<T>(url, {Map params, ErrorCallback callback}) =>
      _request(url, GET, params: params, callback: callback);

  Future<Response<T>> postRequest<T>(url, {Map params, ErrorCallback callback}) =>
      _request(url, POST, params: params, callback: callback);

  Future<Response> download(url, path, {ProgressCallback receive, CancelToken token}) =>
      _dio.download(url, path, onReceiveProgress: receive, cancelToken: token);

  // T 可以指定返回的类型，String 或者 Map<String, dynamic>
  Future<Response<T>> _request<T>(
    url,
    String method, {
    Map params, // 上传的参数
    Options opt,
    ErrorCallback callback, // 错误回调
    ProgressCallback send, // 上传进度监听
    ProgressCallback receive, // 下载监听
    CancelToken token, // 用于取消的 token，可以多个请求绑定一个 token
  }) async {
    try {
      Response<T> rep;

      if (method == GET) {
        // 如果不是重新创建 Dio 实例，get 方法使用 queryParams 会出错，不懂原因，使用拼接没有问题
        if (params != null && params.isNotEmpty) {
          var sb = StringBuffer('?');
          params.forEach((key, value) {
            sb.write('$key=$value&');
          });
          // get 请求下拼接路径
          url += sb.toString().substring(0, sb.length - 1);
        }
        rep = await _dio.get(url, options: opt, onReceiveProgress: receive, cancelToken: token);
      } else if (method == POST) {
        // post 参数放请求体
        rep = params == null
            ? await _dio.post(url, options: opt, cancelToken: token, onSendProgress: send, onReceiveProgress: receive)
            : await _dio.post(url,
                data: params, options: opt, cancelToken: token, onSendProgress: send, onReceiveProgress: receive);
      }

      // 如果 statusCode 不是 200 则错误回调，返回空的 Response
      if (rep.statusCode != 200 && callback != null) {
        callback('network error, and code is ${rep.statusCode}');
        return null;
      }
      return rep;
    } catch (e) {
      if (callback != null) {
        callback('network error, catch error: ${e.toString()}');
      }
      return null;
    }
  }
}

封装后就可以愉快的调用了，如果有别的请求方式后期可以继续扩展。继续看代码，创建一个 application.dart 文件，用于存放全局参数

class Application {
  static HttpUtils http;
}

并在 main() 方法中进行初始化，接下来就可以直接使用

void main() {
  Application.http = HttpUtils('https://randomuser.me');
  
  runApp(DemoApp());

  // 透明状态栏
  if (Platform.isAndroid) {
      SystemChrome.setSystemUIOverlayStyle(SystemUiOverlayStyle(statusBarColor: Colors.transparent));
  }
}

看下最后的实现效果吧，刚进入没有数据则通过转圈圈提示，加载完数据后，点击头像更换下个

bloc_http.gif

实现 BLoC 需要有一个管理类

class UserBloc extends BaseBloc {
  RandomUserModel _user;

  RandomUserModel get user => _user;

  BehaviorSubject<RandomUserModel> _controller = BehaviorSubject();

  Observable<RandomUserModel> get stream => Observable(_controller.stream);

  // 网络请求获取新的数据，并更新
  updateUserInfo() {
    Application.http.getRequest('/api').then((response) {
      // RandomUserModel 就是接口返回的 json 转成的 model 类
      RandomUserModel model = RandomUserModel.fromMap(response.data);
      _user = model;
      // add 到 controller 通知修改
      _controller.add(model);
    });
  }

  @override
  void dispose() {
    _controller?.close(); // 及时销毁
  }
}

设置好管理类后，就可以来编写界面了，界面也比较简单

class UserPageDemo extends StatelessWidget {
  // 将首字母大写
  String _upperFirst(String content) {
    assert(content != null && content.isNotEmpty);
    return '${content.substring(0, 1).toUpperCase()}${content.substring(1)}';
  }

  // 地址信息通用部件
  Widget _userLocation(String info) => Padding(
      padding: const EdgeInsets.only(top: 4.0),
      child: Text(info, style: TextStyle(color: Colors.white, fontSize: 16.0)));

  @override
  Widget build(BuildContext context) {
    UserBloc _bloc = BlocProvider.of<UserBloc>(context);
    _bloc.updateUserInfo();

    return Scaffold(
      // StreamBuilder 接受更新数据的 stream
      body: StreamBuilder(
          builder: (_, AsyncSnapshot<RandomUserModel> snapshot) => Container(
                alignment: Alignment.center,
                decoration: BoxDecoration(
                    gradient: LinearGradient(
                        begin: Alignment.topCenter,
                        end: Alignment.bottomCenter,
                        colors: [Colors.blue[600], Colors.blue[400]])),
                child: !snapshot.hasData
                    ? CupertinoActivityIndicator(radius: 12.0)
                    : Column(mainAxisAlignment: MainAxisAlignment.center, children: <Widget>[
                        InkWell( // 用于切换数据
                            child: ClipOval( // 圆形头像
                              child: FadeInImage.assetNetwork(
                                  placeholder: 'images/ava_default.png', image: snapshot.data.results[0].picture.large),
                            ),
                            onTap: () => _bloc.updateUserInfo()), // 更新数据
                        Padding(
                          padding: const EdgeInsets.only(top: 20.0),
                          child: Text(
                              '${_upperFirst(snapshot.data.results[0].name.first)} ${_upperFirst(snapshot.data.results[0].name.last)}',
                              style: TextStyle(color: Colors.white, fontSize: 24.0)),
                        ),
                        Text('${snapshot.data.results[0].email}',
                            style: TextStyle(color: Colors.white, fontSize: 18.0)),
                        _userLocation('${snapshot.data.results[0].location.street}'),
                        _userLocation('${_upperFirst(snapshot.data.results[0].location.city)}'),
                        _userLocation('${_upperFirst(snapshot.data.results[0].location.state)}'),
                      ]),
              ),
          initialData: _bloc.user, // 注入初始值
          stream: _bloc.stream), // 注入更新 stream
    );
  }
}

以上代码查看 bloc_network 包下的所有文件

当然了，福利是不可少的，但是需要你到项目中自己去找。差不多入门的部分就讲到这了，接下来考虑加个实战，总之先等等吧，我找个好的题材接口来写。

最后代码的地址还是要的：

  1. 文章中涉及的代码：demos

  2. 基于郭神 cool weather 接口的一个项目，实现 BLoC 模式，实现状态管理：flutter_weather

  3. 一个课程(当时买了想看下代码规范的，代码更新会比较慢，虽然是跟着课上的一些写代码，但是还是做了自己的修改，很多地方看着不舒服，然后就改成自己的实现方式了)：flutter_shop

如果对你有帮助的话，记得给个 Star，先谢过，你的认可就是支持我继续写下去的动力~

avatar
文章
阅读
粉丝

友情链接：