距离上一片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布局方面的东西了,也不知道啥时候，再说吧。^ _ ^
