Flutter开发之网络请求

项目中展示的大部分数据都是来自服务器&＃xff0c;我们需要向服务器请求数据&＃xff0c;并且对他们进行解析展示。

一. 网络请求的方式

在Flutter中常见的网络请求方式有三种&＃xff1a;HttpClient、http库、dio库。

1、HttpClient

HttpClient是dart自带的请求类&＃xff0c;在io包中&＃xff0c;实现了基本的网络请求相关的操作。

网络调用通常遵循如下步骤&＃xff1a;

1. 创建 client.
2. 构造 Uri.
3. 发起请求, 等待请求&＃xff0c;同时您也可以配置请求headers、 body。
4. 关闭请求, 等待响应.
5. 解码响应的内容.

代码示例&＃xff1a;

void requestNetwork() async {// 1.创建HttpClient对象final httpClient &＃61; HttpClient();// 2.构建请求的urivar urlStr &＃61; &＃39;https://r.inews.qq.com/getQQNewsUnreadList&＃39;;final uri &＃61; Uri.parse(urlStr);// 3.构建请求final request &＃61; await httpClient.getUrl(uri);// 4.发送请求&＃xff0c;必须final response &＃61; await request.close();if (response.statusCode &＃61;&＃61; HttpStatus.ok) {print(await response.transform(utf8.decoder).join());} else {print(response.statusCode);}
}


返回的结果&＃xff1a;

HttpClient虽然可以发送正常的网络请求&＃xff0c;但是会暴露过多的细节&＃xff1a;

比如需要主动关闭request请求&＃xff0c;拿到数据后也需要手动的进行字符串解码。在开发中&＃xff0c;我们一般很多直接面向HttpClient进行网络请求&＃xff0c;而是使用一些库来完成。

2、http库

http 是 Dart 官方提供的另一个网络请求类&＃xff0c;相比于 HttpClient&＃xff0c;易用性提升了不少。

但是&＃xff0c;没有默认集成到Dart的SDK中&＃xff0c;所以我们需要先在pubspec中依赖它&＃xff1a;

http:


导入http会报错&＃xff1a;

import &＃39;package:http/http.dart&＃39; as http;


找不到&＃xff1f;
参考&＃xff1a;解决方法


void httpNetwork() async {// 1.创建Clientfinal client &＃61; http.Client();var urlStr &＃61; &＃39;https://r.inews.qq.com/getQQNewsUnreadList&＃39;;// 2.构建urifinal url &＃61; Uri.parse(urlStr);// 3.发送请求final response &＃61; await client.get(url);// 4.获取结果if (response.statusCode &＃61;&＃61; HttpStatus.ok) {print(response.body);} else {print(response.statusCode);}
}


打印结果&＃xff1a;

3、dio第三方库

官方提供的HttpClient和http都可以正常的发送网络请求&＃xff0c;但是对于现代的应用程序开发来说&＃xff0c;我们通常要求的东西会更多&＃xff1a;比如拦截器、取消请求、文件上传/下载、超时设置等等&＃xff1b;
这个时候&＃xff0c;我们可以使用一个在Flutter中非常流行的三方库&＃xff1a;dio。

dio是一个强大的Dart Http请求库&＃xff0c;支持Restful API、FormData、拦截器、请求取消、COOKIE管理、文件上传/下载、超时、自定义适配器等…

使用dio三方库必然也需要先在pubspec中依赖它&＃xff1a;

dio:^3.0.1


导入dio&＃xff1a;

import &＃39;package:dio/dio.dart&＃39;;


void dioNetwork() async {// 1.创建Dio请求对象final dio &＃61; Dio();// 2.发送网络请求var urlStr &＃61; &＃39;https://r.inews.qq.com/getQQNewsUnreadList&＃39;;final response &＃61; await dio.get(urlStr);// 3.打印请求结果if (response.statusCode &＃61;&＃61; HttpStatus.ok) {print(response.data);} else {print("请求失败&＃xff1a;${response.statusCode}");}
}


4、dio库的简单封装

创建一个文件命名为&＃xff1a;http_request.dart

import&＃39;package:dio/dio.dart&＃39;;
class HTTPConfig {static const baseURL &＃61; "https://r.inews.qq.com/"; //域名static const timeout &＃61; 10000; //超时时间
}class HttpRequest {static final BaseOptions options &＃61; BaseOptions(baseUrl: HTTPConfig.baseURL, connectTimeout: HTTPConfig.timeout);static final Dio dio &＃61; Dio(options);static Future<T> request<T>(String path,{String method &＃61; &＃39;get&＃39;, Map<String, dynamic> params, Interceptor inter}) async {// 1.请求的单独配置final options &＃61; Options(method: method);// 2.发送网络请求try {Response response &＃61; await dio.request<T>(path, queryParameters: params, options: options);print(response.data);return response.data;} on DioError catch(e) {return Future.error(e);}}
}


代码使用&＃xff1a;

import &＃39;http_request.dart&＃39;;//引用HttpRequest.request("getQQNewsUnreadList").then((value){print(&＃39;返回结果 &＃xff1a;$value&＃39;);});


打印结果&＃xff1a;