iOS 学习Flutter (网络库dio简单封装，数据解析)

  距离上一片flutter的文章好像已经很久了·--！ 哈哈。前段时间在忙着换工作的事，没啥子时间。将我（一名iOS）学习flutter的旅程记录一下吧。 ps:大佬请绕道。
没有装环境的同学传送门iOS - Flutter 环境搭建
我学习的方向是这样的，首先我会想看到数据能跑。一个普通的app，可能数据加UI差不多了，我就从普通的做起。（当然每个人学习方式不一样，随意随意）

本篇就是记录一下我简单封装了一下dio库(是按照以前我封装OC原生网络请求的路子来的,传送门支持一下：OC原生网络请求封装(有几种基本请求方式，下载，后台下载,断点下载，上传)

)，以及返回的数据解析的过程,按照我敲iOS代码的风格，哈哈

首先当然是添加dio库,去flutter packages 查看最新的版本。

• 打开pubspec.yaml文件
• 添加dio库
  添加库
• packages get一下，你就可以引用，开始请求了

接下来就是封装一下了

总共2个Dart文件（Api是个人项目的）

封装类

• api 就是存放一些api字符串，或者host 等，看个人

  
  随便搞一点

• 单个请求类，就是一个请求的配置（如url,timeout,header,params什么的），需要什么可以自己再优化添加

  
  单个请求
• 工具类，调用dio库（目前就加了4种请求）更多功能可以自己去了解dio库

class HttpTool {
  factory HttpTool() => _sharedInstance();

  static HttpTool _instance;

  HttpTool._() {
    // 初始化
    dio = new Dio();

  }

  static Dio dio;

  static HttpTool _sharedInstance() {
    if (_instance == null) {
      _instance = HttpTool._();
    }
    return _instance;
  }
  //全局配置
  void setConfig(String baseUrl, int timeOut) {
    BaseOptions options = new BaseOptions(
        baseUrl: baseUrl,
        connectTimeout: timeOut * 1000,
        receiveTimeout: 3000);
    dio.options = options;
  }
  //发起请求
  void sendRequest(HttpRequest request, Function success,
      Function failure) async {
    try {
      Response res = await dio.request(request.url,
          data: request.params,
          options: new Options(
              method: HttpRequest.getTypeString(request.type),
              headers: request.headers,
              connectTimeout: request.timeOut != null ? request.timeOut * 1000 : dio.options.connectTimeout));
      if (success != null){
        success(res.toString());
      }
      print(res.toString());
    } catch (exception) {
      print('98765' + exception.toString());
      if (failure != null){
        failure(exception.toString());
      }
    }
  }
}

就是整了一个简单单例来统一发起请求，传入单个请求的配置。

使用：

 HttpTool().setConfig('https://xxx/v3x', 10); //全局配置host,timeout

    //单个请求
    HttpRequest req = HttpRequest();
    req.url = '/enduser/verCode/';
    req.type = HttpType.kPost;
    req.params = {'vc_type':0,'login_name':''};
    HttpTool().sendRequest(req, (data){

      print(data);
    }, (error){

    });

全局配置一次就行，有更多的自己加，一般来说，外面还要再包一层业务，我这里就随便了，比如我调了一下我以前公司项目的接口：

返回信息

接下来就是返回数据解析了

• 首先网上搜一下，添加json_serializable库,(怎么用网上也多的是，下面给个例子)

• 创建model类

  
  Model
• Model文件里需要加些东西,比如用我上面的那种回调数据做例子（{"meta":{"message":"User has been registered","code":10253},"data":{}}）

import 'package:json_annotation/json_annotation.dart';
part 'ResponseModel.g.dart';

@JsonSerializable()

class ResponseModel {
  final MetaModel meta;
  final DataModel data;

  ResponseModel(this.meta, this.data);

  //不同的类使用不同的mixin即可
  //反序列化
  factory ResponseModel.fromJson(Map<String, dynamic> json) => _$ResponseModelFromJson(json);
  //序列化
  Map<String, dynamic> toJson() => _$ResponseModelToJson(this);

}

@JsonSerializable()

class MetaModel {
  final String message;
  final int code;

  MetaModel(this.message, this.code);

  //不同的类使用不同的mixin即可
  factory MetaModel.fromJson(Map<String, dynamic> json) =>
      _$MetaModelFromJson(json);

  Map<String, dynamic> toJson() => _$MetaModelToJson(this);
}

@JsonSerializable()

class DataModel {

  final String msg;

  DataModel(this.msg);

  //不同的类使用不同的mixin即可
  factory DataModel.fromJson(Map<String, dynamic> json) =>
      _$DataModelFromJson(json);

  Map<String, dynamic> toJson() => _$DataModelToJson(this);

}

• 然后在项目终端下 flutter packages pub run build_runner build，就会生产.g.Dart文件了。

使用:

HttpRequest req = HttpRequest();
    req.url = '/enduser/verCode/';
    req.type = HttpType.kPost;
    req.params = {};
    HttpTool().sendRequest(req, (data){
      Map responseMap = jsonDecode(data);
      var user = ResponseModel.fromJson(responseMap);
      print(user.meta.message);
    }, (error){

    });

文末：

    简单粗暴，直接上手，有问题再看吧，平常有时间没事做的时候，可以学点新东西，给自己加加分，不是坏事。可能我的代码风格不太符合，毕竟我是一名纯原生开发者，嘻嘻，但是问题不大，慢慢来，慢慢学，慢慢适应。下一篇应该会记录一下UI布局方面的东西了,也不知道啥时候，再说吧。^ _ ^