文章目录
一、引入 http 插件
二、HTTP 请求测试数据
三、使用 http 插件进行 Get 请求
四、使用 http 插件进行 Post 请求
五、将 Get / Post 请求结果 Future
一、引入 http 插件
到 https://pub.dev/packages 搜索 http 组件 https://pub.dev/packages/http ;
安装 http 插件 : 参考 https://pub.dev/packages/http/install 安装 ;
① 配置 Flutter 插件 : 在 pubspec.yaml 配置文件中配置 Flutter 插件 :
dependencies: http: ^0.13.3
② 获取 Flutter 插件 : 点击右上角的 " Pub get " 按钮 , 获取插件 , 此时会自动从 https://pub.dev/packages 平台下载该插件并配置到 Flutter 项目中 ;
③ 在项目中引入 : 在需要使用 Banner 轮播插件 flutter_swiper 的组件代码中导入该 dart 包 ;
import 'package:http/http.dart' as http;
二、HTTP 请求测试数据
在网上找了几个 json 数据链接 :
https://www.devio.org/io/flutter_app/json/test_common_model.json
{ "icon": "https://www.devio.org/io/flutter_app/img/ln_food.png", "title": "美食林", "url": "https://m.ctrip.com/webapp/you/foods/address.html?new=1&ishideheader=true", "statusBarColor": "19A0F0", "hideAppBar": true }
https://jsonplaceholder.typicode.com/posts/1
{ "userId": 1, "id": 1, "title": "sunt aut facere repellat provident occaecati excepturi optio reprehenderit", "body": "quia et suscipit\nsuscipit recusandae consequuntur expedita et cum\nreprehenderit molestiae ut ut quas totam\nnostrum rerum est autem sunt rem eveniet architecto" }
https://jsonplaceholder.typicode.com/users/1/posts
https://jsonplaceholder.typicode.com/users/1/todos
https://jsonplaceholder.typicode.com/users/1/albums
https://jsonplaceholder.typicode.com/albums/1/photos
https://jsonplaceholder.typicode.com/posts/1/comments
三、使用 http 插件进行 Get 请求
引入 http 插件后 ,
import 'package:http/http.dart' as http;
调用 http.get 方法 , 发送 Get 请求 , 会返回一个包括 http.Response 泛型的 Future , 返回值类型为 Future<http.Response> ;
/// 调用 Http Get 方法 , 获取服务器的 json 数据 Future<CommonModel> httpGet() async { //var url = Uri.parse('https://jsonplaceholder.typicode.com/posts/1'); var url = Uri.parse('https://www.devio.org/io/flutter_app/json/test_common_model.json'); final response = await http.get(url); Map<String, dynamic> jsonMap = json.decode(response.body); return CommonModel.fromJson(jsonMap); }
Future 是 异步操作 相关的核心 Dart 类 , 用于表示 将来 某个时间 可能出现的结果 ;
http.Get 返回值是 Future<http.Response> , 其中的 http.Response 泛型中 , 封装了 HTTP Request 请求对应的 Response 响应数据 , 也就是服务器返回给请求端的数据 ;
四、使用 http 插件进行 Post 请求
引入 http 插件后 ,
import 'package:http/http.dart' as http;
调用 http.get 方法 , 发送 Get 请求 , 会返回一个包括 http.Response 泛型的 Future , 返回值类型为 Future<http.Response> ;
/// 调用 Http Post 方法 , 获取服务器的 json 数据 Future<CommonModel> httpPost() async { //var url = Uri.parse('https://jsonplaceholder.typicode.com/posts/1'); var url = Uri.parse('https://www.devio.org/io/flutter_app/json/test_common_model.json'); final response = await http.post(url); Map<String, dynamic> jsonMap = json.decode(response.body); return CommonModel.fromJson(jsonMap); }
Future 是 异步操作 相关的核心 Dart 类 , 用于表示 将来 某个时间 可能出现的结果 ;
http.Get 返回值是 Future<http.Response> , 其中的 http.Response 泛型中 , 封装了 HTTP Request 请求对应的 Response 响应数据 , 也就是服务器返回给请求端的数据 ;
五、将 Get / Post 请求结果 Future<http.Response> 转为 Dart 对象
将 Get / Post 请求结果 Future<http.Response> 转为 Dart 对象 :
创建 Model 类 , 用于存储获取的结果 , 参考 https://jsonplaceholder.typicode.com/posts/1 中的 json 数据创建 Dart 类 ;
CommonModel 类包括一个工厂方法 , 通过 Map<String, dynamic> json 类型 , 构造该类 ;
class CommonModel { final String icon; final String title; final String url; final String statusBarColor; final bool hideAppBar; CommonModel({this.icon, this.title, this.url, this.statusBarColor, this.hideAppBar}); factory CommonModel.fromJson(Map<String, dynamic> json) { return CommonModel( icon: json['icon'], title: json['title'], url: json['url'], statusBarColor: json['statusBarColor'], hideAppBar: json['hideAppBar'], ); } }
将 http.Response 转换为 CommonModel 对象 : 需要使用 dart:convert 包 , 将 json 字符串转为 Map<String, dynamic> 类型数据 ;
/// json 序列化 , 反序列化 包 import 'dart:convert';
然后将 Map<String, dynamic> 类型对象传入 CommonModel 类工厂方法 ;
