Flutter学习-24-三方库Dio的使用和封装

·  阅读 441
Flutter学习-24-三方库Dio的使用和封装

「这是我参与11月更文挑战的第22天,活动详情查看:2021最后一次更文挑战」。

1. Dio的使用

我们之前网络请求使用的是系统的http,我们看下三方的网络请求 dio

image.png 使用的人比较多,而且有中文文档,国内的大神写的。 dio是一个强大的Dart Http请求库,支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等...

  • 使用
dependencies:
dio: ^4.0.3
复制代码
  • get

我们之前的微信项目使用的http请求,我们使用dio请求

async {
  final url = Uri.parse('http://rap2api.taobao.org/app/mock/293940/home/chat/list');
  var dio = Dio();
 var dioResponse = await dio.getUri(url);
 print(dioResponse.statusCode);
 print(dioResponse.data);
 }
复制代码

image.png 这里不用我们自己json转字典,直接就返回了字典。我们可以可以直接传入一个url字符串地址进行请求。

image.png 我们替换下之前的请求

async {
  final url = Uri.parse('http://rap2api.taobao.org/app/mock/293940/home/chat/list');
  var dio = Dio();
 var dioResponse = await dio.getUri(url);
  if(dioResponse.statusCode == 200){
    var listData = dioResponse.data['data'];

   List<ChatModel> data = listData.map<ChatModel>((item) => ChatModel.formMap(item)).toList();
   return data;

}else{
  throw Exception('respose code is = ${dioResponse.statusCode}');
}
复制代码

image.png

  • post

post 请求类似,参数放在data里面

我们自定义一个post接口

image.png

testPostRequest(){

 Future(() async {

   var response = await Dio().post('http://rap2api.taobao.org/app/mock/293940/friend/contact/list',data:{'id':'1'} );

   print(response.data);

 });
}
复制代码

image.png

  • dio.download下载

我们打开腾讯课堂,选择下载链接

void main() {
  //发送网络请求下载
  //1.创建dio 对象
  final dio = Dio();
  //2.下载数据
  var downloadUrl =
      'https://edu-files-1251502357.cos.ap-shanghai.myqcloud.com/CourseTeacher_2.8.1.13_DailyBuild.dmg';
  String savePath = '/Users/hg/Desktop/testDownload/腾讯课堂.dmg';
  download1(dio, downloadUrl, savePath);
}
download1(Dio dio, String url, savePath) {
  dio
      .download(url, savePath, onReceiveProgress: showDownloadProgress)
      .then((value) => print(value))
      .whenComplete(() => print('结束了'))
      .catchError((e) => print(e));
}
复制代码

展示进度通过onReceiveProgress

void showDownloadProgress(int count, int total) {
  if (total != -1) {
    print((count / total * 100).toStringAsFixed(0) + '%');
  }
}
复制代码

image.png 下载结束后

image.png 我们在客户端的话

void download2(Dio dio, String url, String savePath) {
  //手机端
  String iOSPath = Directory.systemTemp.path + '/腾讯课堂.dmg';
  print(iOSPath);
  dio
      .download(url, (header) {
    return iOSPath;
  }, onReceiveProgress: showDownloadProgress)
      .whenComplete(() => print('完成'))
      .catchError((e) => print(e));
}
复制代码

image.png

查看下载结果 image.png 上传的话类似,可以看下官方的demo

image.png

2. 网络请求的封装

一般我们使用的时候都会进行自己的封装 定义一个Dio的单列

 //定义一个单列
static Dio?  _dioShareInstance;

static Dio _getDio(){
  
  _dioShareInstance??= Dio();

  return _dioShareInstance!;
}
复制代码

我们内部实现,根据请求的方式使用dio单列不同的请求

static Future _sendRequest(RequstType type,String url,{Map<String ,dynamic>? queryParameters,dynamic data}) async {

  try{
    switch(type){
      case RequstType.GET:
        return await  HttpRequstManager._getDio().get(url,queryParameters: queryParameters);

      case RequstType.POST:
        return await HttpRequstManager._getDio()
            .post(url, queryParameters: queryParameters, data: data);
      default:
        throw Exception('请求方式错误');
    }

  } on DioError catch(error){
    print(error.message);
  } on Exception catch(error){
    print(error.toString());
  }


  return null;
}
复制代码

我们在外部暴漏出来静态方法提供调用

//返回我们自己的Response
static Future<Response> get(String url,
    {Map<String, dynamic>? queryParameters}) async {
  return await _sendRequest(RequstType.GET, url,
      queryParameters: queryParameters);
}

static Future<Response> post(String url,
    {Map<String, dynamic>? queryParameters, dynamic data}) async {
  return await _sendRequest(RequstType.POST, url,
      queryParameters: queryParameters, data: data);
}
复制代码

我们在之前的项目中使用

 final response = await HttpRequstManager.get('http://rap2api.taobao.org/app/mock/293940/home/chat/list');
  if(response.statusCode == 200){
    var map =response.data;
    var listData = map['data'];
   List<ChatModel> data = listData.map<ChatModel>((item) => ChatModel.formMap(item)).toList();
   return data;

}else{
  throw Exception('respose code is = ${response.statusCode}');
}
复制代码

image.png

分类:
iOS
标签: