Flutter 网络请求的三种简单实现

本文Demo地址 且本篇已同步到 个人博客 ,欢迎常来。

概述:本文主要讲解了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: 'xxx.xxx.xxx.xxx', path: homeNoviceListUrl);
// 方法2
Uri uri = Uri.https('xxx.xxx.xxx.xxx', homeNoviceListUrl);
// uri方法3
Uri uri = Uri.parse(njqbaseUrl + homeNoviceListUrl);
2、简单使用
2.1、GET请求
// 1.1 HttpClient - get (疑问?queryParameters仅仅用在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: 'xxx.xxx.xxx.xxx', path: homeNoviceListUrl);

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

// uri方法3
// Uri uri = Uri.parse(njqbaseUrl + 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.nongfadai.iospro';

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

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: "xxx.xxx.xxx.xxx", path: homeRegularListUrl);
// HttpClientRequest request = await httpClient.postUrl(uri);

var url = njqbaseUrl + 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.nongfadai.iospro");
// 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(njqbaseUrl + homeNoviceListUrl);

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

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

1.2. http - get简便方法(链式编程)

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

    var uri = Uri.parse(njqbaseUrl + 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.nongfadai.iospro";
    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(njqbaseUrl + 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.nongfadai.iospro";
    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 = njqbaseUrl + 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.nongfadai.iospro';
    headers['Content-Type'] = 'application/json';

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

    Response response = await dio.get(homeNoviceListUrl);

    if (response.statusCode == HttpStatus.ok) {
      print(response.headers);
      print(response.data);
    }
  }
2.2. POST请求

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.nongfadai.iospro';
    headers['Content-Type'] = 'application/json';

    Dio dio = Dio();
    dio.options.baseUrl = njqbaseUrl;
    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.nongfadai.iospro';
    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 = njqbaseUrl;

    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('请求失败');
    }
  }
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 204,053评论 6 478
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,527评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,779评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,685评论 1 276
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,699评论 5 366
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,609评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,989评论 3 396
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,654评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,890评论 1 298
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,634评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,716评论 1 330
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,394评论 4 319
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,976评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,950评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,191评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 44,849评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,458评论 2 342

推荐阅读更多精彩内容