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

2023-08-25 01:28:05 179

概述：

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

一.系统自带HttpClient

1.使用中温馨提示

1.1.导入库

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

1.2.Uri的多种初始化方式

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

2.简单使用

2.1.GET请求

//1.1HttpClient-get

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

varhttpClient=newHttpClient();
varparams=Map();

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

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

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

varrequest=awaithttpClient.getUrl(uri);

varheaders=Map();
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");

varresponse=awaitrequest.close();
varresponseBody=awaitresponse.transform(Utf8Decoder()).join();

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

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

2.2.POST请求

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

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

HttpClienthttpClient=newHttpClient();

//queryParametersget请求的查询参数(适用于get请求？？？是吗？？？)
//Uriuri=Uri(
//scheme:"https",host:"app.xxx.com",path:homeRegularListUrl);
//HttpClientRequestrequest=awaithttpClient.postUrl(uri);

varurl=baseUrl+homeRegularListUrl;
HttpClientRequestrequest=awaithttpClient.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
MapjsonMap={'currentPage':'1'};
request.add(utf8.encode(json.encode(jsonMap)));

HttpClientResponseresponse=awaitrequest.close();
StringresponseBody=awaitresponse.transform(utf8.decoder).join();
if(response.statusCode==HttpStatus.ok){
print('请求成功');
print(response.headers);
print(responseBody);
}
}

二.请求第三方库http

1.使用中温馨提示

1.1.添加依赖

dependencies:
http:^0.12.0#latestversion

1.2.导入库

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

2.简单使用

2.1.GET请求

2.2.1.http-get1

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

varclient=http.Client();

varuri=Uri.parse(baseUrl+homeNoviceListUrl);

http.Responseresponse=awaitclient.get(uri);

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

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

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

varuri=Uri.parse(baseUrl+homeNoviceListUrl);

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

2.2.POST请求

2.2.1. http-post

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

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

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

varhttpClient=http.Client();

varuri=Uri.parse(baseUrl+homeNoviceListUrl);

http.Responseresponse=
awaithttpClient.post(uri,body:jsonParams,headers:headers);

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

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

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

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

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

varhttpClient=http.Client();

varurl=baseUrl+homeRegularListUrl;

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

三.请求第三方库Dio

1.使用中温馨提示

1.1.添加依赖

dependencies:
dio:^2.0.11#latestversion

1.2.导入库

import'package:dio/dio.dart';

2.简单使用

2.1.GET请求

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

voidloadData_dio_get()async{
varheaders=Map();
headers['loginSource']='IOS';
headers['useVersion']='3.1.0';
headers['isEncoded']='1';
headers['bundleId']='com.xxx.xxx';
headers['Content-Type']='application/json';

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

Responseresponse=awaitdio.get(homeNoviceListUrl);

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

2.2.POST请求

注意：

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

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

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

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

voidloadData_dio_dioOfOptionsSetting()async{
debugPrint(
'\npost请求=======================开始请求=======================\n');
varheaders=Map();
headers['loginSource']='IOS';
headers['useVersion']='3.1.0';
headers['isEncoded']='1';
headers['bundleId']='com.xxx.xxx';
headers['Content-Type']='application/json';

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

Optionsoption=Options(method:'post');
//Responseresponse=awaitdio.request(homeRegularListUrl,
//data:{"currentPage":"1"},options:option);

Responseresponse=awaitdio.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上设置请求头参数

voidloadData_dio_newOptionSetting()async{
debugPrint('\n=======================开始请求=======================\n');
varheaders=Map();
headers['loginSource']='IOS';
headers['useVersion']='3.1.0';
headers['isEncoded']='1';
headers['bundleId']='com.xxx.xxx';
headers['Content-Type']='application/json';

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

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

Responseresponse=awaitdio.post(homeRegularListUrl,
data:{"currentPage":1},options:option);
//Responseresponse=awaitdio.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网络请求的3种简单实现方法

热门推荐

随机推荐