美文网首页
第十一章:Flutter之Dio网络请求

第十一章:Flutter之Dio网络请求

作者: Mr姜饼 | 来源:发表于2021-05-20 16:58 被阅读0次

打开Flutter官方三方库地址,找到dio

在pubSpec文件中添加以下代码


#引入的dio版本是一个版本区间;>=4.0.0 && <5.0.0
dio: ^4.0.0
#dio: ^4.0.0 指定版本
#dio: any  任意版本
#dio: >4.0.0 大于版本

pub get 执行

创建http_manager.dart开始封装我们的网络请求

import 'package:dio/dio.dart';

class HttpManager {

  static final Dio dio = Dio();

  static Future request(String url, {
    String method = 'get',//请求类型
    Map<String, dynamic> queryParameters,//请求参数
    int timeout,//超时时间(毫秒)
  }) {
    final  options = Options(method: method,receiveTimeout: timeout);
    return dio.request(url,
        queryParameters: queryParameters,
        options: options
    );
  }
}

Future get(String url,{
  String method = 'get',//请求类型
  Map<String, dynamic> queryParameters,//请求参数
  int timeout,//超时时间(毫秒)
  }){
  return HttpManager.request(url,queryParameters: queryParameters,timeout: timeout,method: method);
}

改造我们之前的wechat项目,用dio替换http请求

import 'package:wechat_demo/tools/http_manager.dart' as http;
//import 'package:http/http.dart' as http;//网络请求
final responseDatas =  await http.get('http://rap2api.taobao.org/app/mock/283622/api/chatlist',timeout: 4000);

同时去掉我们之前的超时控制策略,因为我们已经封装进去了,我们只需要传timeout参数进去即可

!!!!注意,dio已经将Json转为Map了,所以我们之前的转化,要去掉

Map listDatas =  json.decode(responseDatas.data);

替换成以下代码。。。直接取

Map listDatas =  responseDatas.data;

.

Dio补充:

发起一个 POST 请求:

response = await dio.post('/test', data: {'id': 12, 'name': 'wendu'});

发起多个并发请求:

response = await Future.wait([dio.post('/info'), dio.get('/token')]);

下载文件:

response = await dio.download('https://www.google.com/', './xx.html');

以流的方式接收响应数据:

Response<ResponseBody> rs;
rs = await Dio().get<ResponseBody>(url,
  options: Options(responseType: ResponseType.stream),  //设置接收类型为stream
);
print(rs.data.stream); //响应流

以二进制数组的方式接收响应数据

Response<List<int>> rs 
rs = await Dio().get<List<int>>(url,
 options: Options(responseType: ResponseType.bytes), //设置接收类型为二进制数组
);
print(rs.data); // 二进制数组

发送 FormData:

var formData = FormData.fromMap({
  'name': 'wendux',
  'age': 25,
});
var response = await dio.post('/info', data: formData);

通过FormData上传多个文件:

var formData = FormData.fromMap({
  'name': 'wendux',
  'age': 25,
  'file': await MultipartFile.fromFile('./text.txt', filename: 'upload.txt'),
  'files': [
    await MultipartFile.fromFile('./text1.txt', filename: 'text1.txt'),
    await MultipartFile.fromFile('./text2.txt', filename: 'text2.txt'),
  ]
});
var response = await dio.post('/info', data: formData);

监听发送(上传)数据进度:

response = await dio.post(
  'http://www.dtworkroom.com/doris/1/2.0.0/test',
  data: {'aa': 'bb' * 22},
  onSendProgress: (int sent, int total) {
    print('$sent $total');
  },
);

以流的形式提交二进制数据:

List<int> postData = <int>[...];
await dio.post(
  url,
  data: Stream.fromIterable(postData.map((e) => [e])), //创建一个Stream<List<int>>
  options: Options(
    headers: {
      Headers.contentLengthHeader: postData.length, // 设置content-length
    },
  ),
);

// 二进制数据
List<int> postData = <int>[...];

await dio.post(
  url,
  data: Stream.fromIterable(postData.map((e) => [e])), //创建一个Stream<List<int>>
  options: Options(
    headers: {
      Headers.contentLengthHeader: postData.length, // 设置content-length
    },
  ),
);

创建一个Dio实例,并配置它

var dio = Dio(); // with default Options

// Set default configs
dio.options.baseUrl = 'https://www.xx.com/api';
dio.options.connectTimeout = 5000; //5s
dio.options.receiveTimeout = 3000;

// or new Dio with a BaseOptions instance.
var options = BaseOptions(
  baseUrl: 'https://www.xx.com/api',
  connectTimeout: 5000,
  receiveTimeout: 3000,
);
Dio dio = Dio(options);

相关文章

网友评论

      本文标题:第十一章:Flutter之Dio网络请求

      本文链接:https://www.haomeiwen.com/subject/muyvjltx.html