Flutter网络请求的3种简单实现方法

移动开发 得得之家
这篇文章主要给大家介绍了给大家Flutter网络请求的3种简单实现方法，文中通过示例代码介绍的非常详细，对大家学习或者使用Flutter具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧

概述：

App几乎都离不开与服务器的交互，本文主要讲解了flutter网络请求三种方式 flutter自带的HttpClient、 第三方库http 和 第三方库Dio  的简单实现 GET 和 POST请求，本文是笔者学习Flutter网络模块知识总结，若有问题还望不腻赐教。

一.系统自带HttpClient

1.使用中温馨提示

1.1.导入库


import 'dart:io'; // 网络请求
import 'dart:convert'; // 数据解析

1.2.Uri的多种初始化方式


// 方法1
Uri uri = Uri(scheme: 'https', host: 'app.xxx.com', path: homeNoviceListUrl);
// 方法2
Uri uri = Uri.https('app.xxx.com', homeNoviceListUrl);
// uri方法3
Uri uri = Uri.parse(baseUrl + homeNoviceListUrl);

2.简单使用

2.1.GET请求


// 1.1 HttpClient - get 

void loadData_sys_get() async {
print('------loadData_sys_get--------');

var httpClient = new HttpClient();
var params = Map<String, String>();

// uri方法1
Uri uri =
 Uri(scheme: 'https', host: 'app.xxx.com', path: homeNoviceListUrl);

// uri方法2
// Uri uri = Uri.https(
// 'app.xxx.com', homeNoviceListUrl);

// uri方法3
// Uri uri = Uri.parse(baseUrl + homeNoviceListUrl);

var request = await httpClient.getUrl(uri);

var headers = Map<String, String>();
headers['loginSource'] = 'IOS';
headers['useVersion'] = '3.1.0';
headers['isEncoded'] = '1';
headers['bundleId'] = 'com.xxx.xxx';

request.headers.add("loginSource", "IOS");
request.headers.add("useVersion", "3.1.0");
request.headers.add("isEncoded", "1");
request.headers.add("bundleId", "com.xxx.xxx");

var response = await request.close();
var responseBody = await response.transform(Utf8Decoder()).join();

if (response.statusCode == HttpStatus.ok) {
 print('请求头：${response.headers}');

 print('111请求成功代发数据为:\n $responseBody');
 print('--------------');
 Map data = jsonDecode(responseBody);
 print('222请求成功代发数据为:\n $data');
} else {
 print('\n\n\n11111==请求失败${response.statusCode}');
}
}

2.2.POST请求

注意点：请求参数需要编码后放在request中


void loadData_sys_post() async {
print('------loadData_sys_post--------');

HttpClient httpClient = new HttpClient();

// queryParameters get请求的查询参数(适用于get请求？？？是吗？？？)
// Uri uri = Uri(
// scheme: "https", host: "app.xxx.com", path: homeRegularListUrl);
// HttpClientRequest request = await httpClient.postUrl(uri);

var url = baseUrl + homeRegularListUrl;
HttpClientRequest request = await httpClient.postUrl(Uri.parse(url));

// 设置请求头
request.headers.set("loginSource", "IOS");
request.headers.set("useVersion", "3.1.0");
request.headers.set("isEncoded", "1");
request.headers.set("bundleId", "com.xxx.xxx");
// Content-Type大小写都ok
request.headers.set('content-type', 'application/json');

/// 添加请求体
/// https://stackoverflow.com/questions/50278258/http-post-with-json-on-body-flutter-dart/50295533
Map jsonMap = {'currentPage': '1'};
request.add(utf8.encode(json.encode(jsonMap)));

HttpClientResponse response = await request.close();
String responseBody = await response.transform(utf8.decoder).join();
if (response.statusCode == HttpStatus.ok) {
 print('请求成功');
 print(response.headers);
 print(responseBody);
}
}

二.请求第三方库 http

1.使用中温馨提示

1.1.添加依赖


dependencies:
 http: ^0.12.0 #latest version

1.2.导入库


import 'package:http/http.dart' as http; //导入前需要配置

2.简单使用

2.1. GET请求

2.2.1. http - get1


 void loadData_http_get() async {
 print('------loadData_http_get--------');

 var client = http.Client();

 var uri = Uri.parse(baseUrl + homeNoviceListUrl);

 http.Response response = await client.get(uri);

 if (response.statusCode == HttpStatus.ok) {
 print(response.body);
 } else {
 print('请求失败 code 码为${response.statusCode}');
 }
 }

2.2. http - get简便方法（链式编程）


void loadData_http_get_convenience() async {
 print('------简便方法loadData_http_get_convenience--------');

 var uri = Uri.parse(baseUrl + homeNoviceListUrl);

 http.Client().get(uri).then((http.Response response) {
 if (response.statusCode == HttpStatus.ok) {
 print(response.body);
 } else {
 print('请求失败 code 码为${response.statusCode}');
 }
 });
 }

2.2. POST请求

2.2.1.  http - post


 void loadData_http_post() async {
 print('------ loadData_http_post --------');

 var headers = Map<String, String>();
 headers["loginSource"] = "IOS";
 headers["useVersion"] = "3.1.0";
 headers["isEncoded"] = "1";
 headers["bundleId"] = "com.xxx.xxx";
 headers["loginSource"] = "IOS";
 headers["Content\-Type"] = "application/json";

 Map params = {'currentPage': '1'};
 // 嵌套两层都可以，但是具体哪个好还有待确认？？？？
 var jsonParams = utf8.encode(json.encode(params));
 // var jsonParams = json.encode(params);

 var httpClient = http.Client();

 var uri = Uri.parse(baseUrl + homeNoviceListUrl);

 http.Response response =
 await httpClient.post(uri, body: jsonParams, headers: headers);

 if (response.statusCode == HttpStatus.ok) {
 print(response.body);
 } else {
 print('请求失败 code 码���${response.statusCode}');
 }
 }

2.2.2. http - Post简便方法（链式编程）


 void loadData_http_post_convenience() async {
 print('------ loadData_http_post --------');

 var headers = Map<String, String>();
 headers["loginSource"] = "IOS";
 headers["useVersion"] = "3.1.0";
 headers["isEncoded"] = "1";
 headers["bundleId"] = "com.xxx.xxx";
 headers["loginSource"] = "IOS";
 headers["Content\-Type"] = "application/json";

 Map params = {'currentPage': '1'};
 // 嵌套两层都可以，但是具体哪个好还有待确认？？？？
 var jsonParams = utf8.encode(json.encode(params));
 // var jsonParams = json.encode(params);

 var httpClient = http.Client();

 var url = baseUrl + homeRegularListUrl;

 httpClient.post(url, body: jsonParams, headers: headers).then((response) {
 print("Response status: ${response.statusCode}");
 print("Response body: ${response.body}");
 }).whenComplete(httpClient.close);
 }

三.请求第三方库 Dio

1.使用中温馨提示

1.1.添加依赖


dependencies:
 dio: ^2.0.11 #latest version

1.2.导入库


import 'package:dio/dio.dart';

2.简单使用

2.1. GET请求

注意：Dio的get请求（baseUrl都是在dio.option.baseUrl设置的） 请求头可以在dio.option上设置，也可以在新建的option上设置,新建option是可选的


void loadData_dio_get() async {
 var headers = Map<String, String>();
 headers['loginSource'] = 'IOS';
 headers['useVersion'] = '3.1.0';
 headers['isEncoded'] = '1';
 headers['bundleId'] = 'com.xxx.xxx';
 headers['Content-Type'] = 'application/json';

 Dio dio = Dio();
 dio.options.headers.addAll(headers);
 dio.options.baseUrl = baseUrl;

 Response response = await dio.get(homeNoviceListUrl);

 if (response.statusCode == HttpStatus.ok) {
 print(response.headers);
 print(response.data);
 }
 }

2.2. POST请求

注意：

dio.options.method设置是无效
Dio dio = Dio();
dio.options.method = 'post';

办法：
新建一个Options对象，然后在发起请求的时候进行设置：
Options option = Options(method:'post');
Response response = await dio.request(homeRegularListUrl,data:{"currentPage": "1"}, options: option);

2.2.1. dio - 方式一（baseUrl都是在dio.option.baseUrl设置的）

注意：直接在 dio.options设置除methods以外的 请求头参数


void loadData_dio_dioOfOptionsSetting() async {
 debugPrint(
 ' \n post请求 ======================= 开始请求 =======================\n');
 var headers = Map<String, String>();
 headers['loginSource'] = 'IOS';
 headers['useVersion'] = '3.1.0';
 headers['isEncoded'] = '1';
 headers['bundleId'] = 'com.xxx.xxx';
 headers['Content-Type'] = 'application/json';

 Dio dio = Dio();
 dio.options.baseUrl = baseUrl;
 dio.options.connectTimeout = 60000;
 dio.options.receiveTimeout = 60000;
 dio.options.headers.addAll(headers);
 dio.options.method = 'post';

 Options option = Options(method: 'post');
 // Response response = await dio.request(homeRegularListUrl,
 // data: {"currentPage": "1"}, options: option);

 Response response = await dio.post(homeRegularListUrl,
 data: {"currentPage": "1"}, options: option);

 if (response.statusCode == HttpStatus.ok) {
 debugPrint('请求参数： ${response.request.queryParameters}');
 debugPrint(
  '-------------------请求成功,请求结果如下:-----------------\n \n===请求求url: ${response.request.uri.toString()} \n \n===请求 ���: \n${response.headers} \n \n===请求结果: \n${response.data}\n');
 debugPrint('-------------------请求成功,请求结果打印完毕----------------');
 } else {
 print('请求失败');
 }
 }

2.2.2. dio - 方式二（baseUrl都是在dio.option.baseUrl设置的）

注意：在新建的option上设置请求头参数


void loadData_dio_newOptionSetting() async {
 debugPrint(' \n======================= 开始请求 =======================\n');
 var headers = Map<String, String>();
 headers['loginSource'] = 'IOS';
 headers['useVersion'] = '3.1.0';
 headers['isEncoded'] = '1';
 headers['bundleId'] = 'com.xxx.xxx';
 headers['Content-Type'] = 'application/json';

 Options option = Options(method: 'post');
 option.connectTimeout = 60000;
 option.receiveTimeout = 60000;
 option.headers.addAll(headers);

 Dio dio = Dio();
 dio.options.baseUrl = baseUrl;

 Response response = await dio.post(homeRegularListUrl,
 data: {"currentPage": 1}, options: option);
 // Response response = await dio.request(homeRegularListUrl,
 // data: {"currentPage": 1}, options: option);

 if (response.statusCode == HttpStatus.ok) {
 debugPrint('请求参数： ${response.request.queryParameters}');
 debugPrint(
  '-------------------请求成功,请求结果如下:-----------------\n \n===请求url: ${response.request.uri.toString()} \n \n===请求 头: \n${response.headers} \n \n===请求结果: \n${response.data}\n');
 debugPrint('-------------------请求成功,请求结果打印完毕----------------');
 } else {
 print('请求失败');
 }
 }

总结

以上就是这篇文章的全部内容了，希望本文的内容对大家的学习或者工作具有一定的参考学习价值，谢谢大家对得得之家的支持。

本站部分内容来源互联网,如果有图片或者内容侵犯您的权益请联系我们删除！

相关文档推荐

Flutter启动流程的深入解析
这篇文章主要给大家介绍了关于Flutter启动流程的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Flutter具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
Flutter启动页(闪屏页)的具体实现及原理详析
这篇文章主要给大家介绍了关于Flutter启动页(闪屏页)的具体实现及原理的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Flutter具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
Flutter调用Android和iOS原生代码的方法示例
这篇文章主要给大家介绍了关于Flutter调用Android和iOS原生代码的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Flutter具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
RxJava+Retrofit实现网络请求封装的方法
Retrofit是当前应用非常广泛的网络请求框架，通常结合RxJava来进行网络请求，本文将展示一个采用RxJava+Retrofit的网络请求demo，感兴趣的可以了解一下
你必须掌握在Flutter中添加资源文件的方法
这篇文章主要介绍了你必须掌握在Flutter中添加资源文件的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
Flutter开发之Widget自定义总结
这篇文章主要给大家介绍了关于Flutter开发中Widget自定义的相关资料，文中通过示例代码介绍的非常详细，对大家学习或者使用Flutter具有一定的参考学习价值，需要的朋友们下面来一起学习学习吧
前端开发编程语言数据库服务器系统/运维网络/安全移动开发建站教程网站运营
html vue validate adobe dreamweaver hbuilder vscode aptana editor dedecms ckeditor 编辑器 过滤 规则 织梦 图片本地化 模板 缩略图 图集 图片删除 ajax 瀑布流 无限下拉 cms 判断 sql 清除 tag 文档数 angularjs2 按钮 切换效果 vue3 thinkphp yii2 css 项目列表 li go Beego Buffalo Echo Gin Iris Revel 百度云 虚拟主机 pbootcms 伪静态 框架 排序 数据库 对象 字段 sql语句 php 字符串 分割 D3.js bootstrap 函数 svg selectAll 织梦cms 关键词 解析 采集 长度限制 日期 正则表达式