【Flutter】HTTP 网络操作 ( 引入 http 插件 | 测试网站 | Get 请求 | Post 请求 | 将响应结果转为 Dart 对象 | Future 异步调用 )(一)

简介: 【Flutter】HTTP 网络操作 ( 引入 http 插件 | 测试网站 | Get 请求 | Post 请求 | 将响应结果转为 Dart 对象 | Future 异步调用 )(一)

文章目录

一、引入 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 项目中 ;

image.png



③ 在项目中引入 : 在需要使用 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 类工厂方法 ;




目录
相关文章
|
2月前
|
Dart
Flutter 快捷键 和 插件使用
Flutter 快捷键 和 插件使用
Flutter 快捷键 和 插件使用
|
2月前
|
前端开发 网络协议 安全
【网络原理】——HTTP协议、fiddler抓包
HTTP超文本传输,HTML,fiddler抓包,URL,urlencode,HTTP首行方法,GET方法,POST方法
|
2月前
|
存储 JSON 缓存
【网络原理】——HTTP请求头中的属性
HTTP请求头,HOST、Content-Agent、Content-Type、User-Agent、Referer、Cookie。
|
2月前
|
JSON Dart 前端开发
鸿蒙应用开发从入门到入行 - 篇7:http网络请求
在本篇文章里,您将掌握鸿蒙开发工具DevEco的基本使用、ArkUI里的基础组件,并通过制作一个简单界面掌握使用
88 8
|
2月前
|
数据采集 安全 搜索推荐
HTTP代理IP纯净度 提升用户网络体验的核心竞争力
随着互联网发展,使用HTTP动态代理IP的需求日益增加。高纯净度的代理IP在隐私与安全、网络体验和业务运营方面至关重要。它能保护用户信息、提高数据安全性、确保访问速度和连接稳定,并提升业务效率与信誉度。
58 2
|
2月前
|
缓存 负载均衡 监控
HTTP代理服务器在网络安全中的重要性
随着科技和互联网的发展,HTTP代理IP中的代理服务器在企业业务中扮演重要角色。其主要作用包括:保护用户信息、访问控制、缓存内容、负载均衡、日志记录和协议转换,从而在网络管理、性能优化和安全性方面发挥关键作用。
96 2
|
3月前
|
存储 安全 搜索推荐
应该使用HTTPS的一些网站
应该使用HTTPS的一些网站
104 3
|
2月前
|
安全 网络协议 网络安全
网络不稳定导致HTTP代理频繁掉线的分析
随着数字化时代的加速发展,网络安全、隐私保护及内容访问自由成为用户核心需求。HTTP代理服务器因其独特技术优势受到青睐,但其掉线问题频发。本文分析了HTTP代理服务器不稳定导致掉线的主要原因,包括网络问题、服务器质量、用户配置错误及IP资源问题等方面。
147 0
|
Web App开发 前端开发
|
Web App开发 前端开发 数据库
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html><head><meta http-equiv="Cont
数据仓库建模:定义事实表的粒度Posted on 2015-08-25 09:03 xuzhengzhu 阅读(28) 评论(0) 编辑 收藏 维度建模中一个非常重要的步骤是定义事实表的粒度。
709 0

热门文章

最新文章