前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
工具
TVP
发布
社区首页 >专栏 >Flutter Http网络操作实用教程

Flutter Http网络操作实用教程

作者头像
CrazyCodeBoy
发布2019-12-10 18:11:31
2.1K0
发布2019-12-10 18:11:31
举报
文章被收录于专栏:贾鹏辉的技术专栏@CrazyCodeBoy
 Flutter Http网络操作实用教程
Flutter Http网络操作实用教程

在这篇文章中,将向大家分享Flutter网络操作的一些实用知识和技巧,包括如何用Http库做get请求?如何用Http库做post请求?如何将Response转换成Dart object?,以及如何将请求结果展示在界面上?等。

  • 在大家Flutter开发环境过程中遇到无法解决的问题可以在课程问答区进行提问,课程老师会对你进行辅导和帮助;

目录

  • 如何用Http库做get请求?
  • 如何用Http库做post请求?
  • 如何将Response转换成Dart object
  • 如何将请求结果展示在界面上?

网络请求是开发APP必不可少的一部分,比如获取用户订单数据,获取商品列表,提交表单等等都离不了网络请求,那么在Flutter中如何进行网络请求呢?

Flutter官方推荐我们在Flutter中用Http进行网络请求。

什么是Http?

Http 是Flutter社区开发的一个可组合的、跨平台的用于Flutter的网络请求插件。

如何用http库做get请求?

  • pubspec.yaml中引入http插件;
  • 调用http.get发送请求;
代码语言:javascript
复制
dependencies:
  http: <latest_version>
代码语言:javascript
复制
Future<http.Response> fetchPost() {
  return http.get('https://jsonplaceholder.typicode.com/posts/1');
}

http.get()返回一个包含http.ResponseFuture

  • Future:是与异步操作一起工作的核心Dart类。它用于表示未来某个时间可能会出现的可用值或错误;
  • http.Response:类包含一个成功的HTTP请求接收到的数据;

在上一节讲解了Future的用法,以及如何从Future中获取服务端具体的返回数据,如果你对Flutter中的Future还不熟悉的话可以去学习下。

如何用http库做post请求?

代码语言:javascript
复制
dependencies:
  http: <latest_version>
代码语言:javascript
复制
Future<http.Response> fetchPost() {
  return http.post('https://jsonplaceholder.typicode.com/posts/1');
}

http.post()返回一个包含http.ResponseFuture

  • Future:是与异步操作一起工作的核心Dart类。它用于表示未来某个时间可能会出现的可用值或错误;
  • http.Response:类包含一个成功的HTTP请求接收到的数据;

在上一节讲解了Future的用法,以及如何从Future中获取服务端具体的返回数据,如果你对Flutter中的Future还不熟悉的话可以去学习下。

如何将Response转换成Dart object?

虽然发出网络请求很简单,但如果要使用原始的Future<http.Response>并不简单。为了让我们可以开开心心的写代码,我们可以将http.Response转换成我们自己的Dart对象。

创建一个CommonModel类

首先,我们需要创建一个CommonModel类,它包含我们网络请求的数据。它还将包括一个工厂构造函数,它允许我们可以通过json创建一个CommonModel对象。

代码语言:javascript
复制
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对象

现在,我们将更新fetchPost函数以返回一个Future<Post>。为此,我们需要:

  1. 使用dart:convert package将响应内容转化为一个json Map;
  2. 使用fromJson工厂函数,将json Map 转化为一个CommonModel对象;
代码语言:javascript
复制
Future<CommonModel> fetchPost() async {
    final response = await http.get('https://www.devio.org/io/flutter_app/json/test_common_model.json');
    final result = json.decode(response.body);
    return new CommonModel.fromJson(result);
  }

如何将请求结果展示在界面上?

http_get_test
http_get_test
代码语言:javascript
复制
...
class _MyAppState extends State<MyApp> {
  String showResult = '';

  Future<CommonModel> fetchPost() async {
    final response = await http
        .get('https://www.devio.org/io/flutter_app/json/test_common_model.json');
    final result = json.decode(response.body);
    return CommonModel.fromJson(result);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Http'),
        ),
        body: Column(
          children: <Widget>[
            InkWell(
              onTap: () {
                fetchPost().then((CommonModel value) {
                  setState(() {
                    showResult =
                        '请求结果:\nhideAppBar:${value.hideAppBar}\nicon:${value.icon}';
                  });
                });
              },
              child: Text(
                '点我',
                style: TextStyle(fontSize: 26),
              ),
            ),
            Text(showResult)
          ],
        ),
      ),
    );
  }
}

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'],
    );
  }
}

查看全部完整代码

在上述代码中我们通过fetchPost().then获取Fluter的返回结果,其实Future可以理解为ES5中的Promise,在接来下的课程中会有对Future的详细讲解。

参考资料

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
0 条评论
热度
最新
推荐阅读
目录
  • 目录
  • 什么是Http?
  • 如何用http库做get请求?
  • 如何用http库做post请求?
  • 如何将Response转换成Dart object?
    • 创建一个CommonModel类
      • 将http.Response转换成一个CommonModel对象
      • 如何将请求结果展示在界面上?
      • 参考资料
      领券
      问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档