Flutter 第六课 --- flutter网络请求 （一）

开启掘金成长之旅！这是我参与「掘金日新计划 · 12 月更文挑战」的第5天，点击查看活动详情

Flutter系列文章列表

1. 2022年了，你还不会flutter!!!
2. Flutter 第一课---flutter特点及组件开发
3. Flutter 第二课---组件生命周期和App生命周期
4. Flutter 第三课---状态管理之Provide
5. Flutter 第四课---路由管理
6. Flutter 第五课 --- 包管理器和资源管理

Flutter 请求网络的三种方式

flutter 请求网络的方式有三种，分别是 Dart 原生的网络请求 HttpClient、第三方网络请求 http以及 Flutter 中的 Dio。

HttpClient

HttpClient是dart自带的请求类，实现了基本的网络请求相关的操作。

1. HttpClient 使用步骤：

• 创建 client。
• 构造 Uri。
• 发起请求, 等待请求，同时您也可以配置请求headers、 body。
• 关闭请求, 等待响应。
• 解码响应的内容。

2. 网络请求实例：

// 需要导入httpClient包，import ‘dart:convert’; 和 import ‘dart:io’ ;
import 'dart:convert';
import 'dart:io';

main() {
  HttpRequest();
}

void HttpRequest() async {
  final httpClient = HttpClient();  // 1.创建HttpClient对象
  final uri = Uri.parse("http://123.207.32.32:8000/api/v1/recommend");    // 2.构建请求的uri
  final request = await httpClient.getUrl(uri);    // 3.构建请求
  final response = await request.close();  // 4.发送请求，必须
  if (response.statusCode == HttpStatus.ok) {
    print(await response.transform(utf8.decoder).join());
  } else {
    print(response.statusCode);
  }
}

在开发中我们很少使用它来发送请求，就像前端请求中，你经常会用XMLHttpRequest去发送请求么，答案是否定。所以同样的，flutter中也是一样，我们很少使用HttpClient,而是去使用第三库来发送请求。

Http

http 是 Dart 官方提供的另一个网络请求类，相比于 HttpClient，易用性提升了不少。这里只是对http的常用网络请求做一个基本的演示，更多使用细节，请查与文档。

flutter默认没有集成到Dart的SDK中，所以我们需要先在pubspec中安装：

关于第三方依赖包的安装，我在之前的文章中讲过了，这里直接导入：

import 'package:http/http.dart';

基本使用

1. get请求

import 'dart:convert';
import 'package:http/http.dart' as http;
var url = Uri.https('https://example.com/whatsit/create');
var header = {'Content-Type': 'application/json'};
var response = await http.get(url,headers:header);
print('Response status: ${response.statusCode}');
print('Response body: ${response.body}');

2. post请求

import 'dart:convert';
import 'package:http/http.dart' as http;
var url = Uri.https('example.com', 'whatsit/create');
var response = await http.post(url, body: {'name': 'doodle', 'color': 'blue'});
print('Response status: ${response.statusCode}');
print('Response body: ${response.body}');
print(await http.read(Uri.https('example.com', 'foobar.txt')));

3. 重试请求

package:http/retry.dart提供一个类RetryClient来包装一个http.Client透明地重试失败请求的底层。

import 'dart:convert';
import 'package:http/http.dart' as http;
import 'package:http/retry.dart';
final client = RetryClient(http.Client());
try {
  print(await client.read(Uri.http('example.com')));
} finally {
  client.close();
}

Dio

官方提供的HttpClient和http都可以正常的发送网络请求，但是对于现代的应用程序开发来说，我们通常要求的东西会更多：比如拦截器、取消请求、文件上传/下载、超时设置等等，Dio就是拥有如此之多功能的第三方依赖库。

官网有对dio进行解释： dio是一个强大的Dart Http请求库，支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等…

安装（同上）

基本使用

1. get请求

import 'package:dio/dio.dart';
void dioNetwork() async {
  final dio = Dio();    // 1.创建Dio请求对象
  final response = await dio.get("/test");    // 2.发送网络请求
  if (response.statusCode == HttpStatus.ok) {
    print(response.data);    // 3.打印请求结果
  } else {
    print("请求失败：${response.statusCode}");
  }
}

2. post请求

import 'package:dio/dio.dart';
void dioNetwork() async {
  final dio = Dio();    // 1.创建Dio请求对象
  Response response;
  response = await dio.post('/test', data: {'id': 12, 'name': 'wendu'});    // 2.发送网络请求
  if (response.statusCode == HttpStatus.ok) {
    print(response.data);    // 3.打印请求结果
  } else {
    print("请求失败：${response.statusCode}");
  }
}

3. 并发请求

import 'package:dio/dio.dart';
void dioNetwork() async {
  final dio = Dio();    // 1.创建Dio请求对象
  Response response;  
  response = await Future.wait([dio.post('/info'), dio.get('/token')]);    // 2.发送网络请求
  if (response.statusCode == HttpStatus.ok) {
    print(response.data);
  } else {
    print("请求失败：${response.statusCode}");    // 3.打印请求结果
  }
}

4. 下载文件

import 'package:dio/dio.dart';
void dioNetwork() async {
  final dio = Dio();    // 1.创建Dio请求对象
  Response response;
  response = await dio.download('https://www.google.com/', './xx.html');    // 2.发送网络请求
  if (response.statusCode == HttpStatus.ok) {
    print(response.data);    // 3.打印请求结果
  } else {
    print("请求失败：${response.statusCode}"); 
  }
}

其他详细使用，请查阅Dio文档

结束语

关于flutter网络请求的学习到这里就结束了。下期我们来说说flutter Dio网络封装处理。如果你刚好正在学习flutter，可以关注我，请相信会给你不一样的收获。如果你是flutter大佬，欢迎指导！