Flutter 高效自学笔记(三)——网络请求

栏目: Android · 发布时间: 5年前

内容简介:首先我要知道如何打 log,搜一下 flutter log 就得到了答案——print() / debugPrint()也可以使用另一个包然后所有 flutter make http request,就搜索到 Flutter 关于 http 的文档

首先我要知道如何打 log,搜一下 flutter log 就得到了答案——print() / debugPrint()

也可以使用另一个包

import 'dart:developer';
log('data: $data');
复制代码

请求网络

然后所有 flutter make http request,就搜索到 Flutter 关于 http 的文档

flutter.dev/docs/cookbo…

  1. 安装依赖,然后 flutter packages get
  2. import 'package:http/http.dart' as http;

然后核心逻辑大概是这样

import 'dart:convert';
import 'package:http/http.dart' as http;

Future<Post> fetchPost() async {
  final response =
      await http.get('https://jsonplaceholder.typicode.com/posts/1');
  if (response.statusCode == 200) {
    return Post.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to load post');
  }
}
复制代码

看起来非常像 TypeScript 代码。

调用时机

那么什么时候调用 fetchPost 呢?

文档说不建议在 build 里调用。

也对,我们一般也不在 React 的 render 里面调用 axios。

文档推荐的一种方法是在 StatefulWidget 的 initState 或 didChangeDependencies 生命周期函数里发起请求。

class _MyAppState extends State<MyApp> {
  Future<Post> post;

  @override
  void initState() {
    super.initState();
    post = fetchPost();
  }
  ...
复制代码

另一种方式就是先请求,然后把 Future 实例传给一个 StatelessWidget

如何用 FutureBuilder 展示数据

FutureBuilder<Post>(
  future: fetchPost(),
  builder: (context, snapshot) {
    if (snapshot.hasData) {
      return Text(snapshot.data.title);
    } else if (snapshot.hasError) {
      return Text("${snapshot.error}");
    }

    // By default, show a loading spinner
    return CircularProgressIndicator();
  },
);
复制代码

FutureBuilder 接受一个 future 和 一个 builder,builder 会根据 snapshot 的内容,渲染不同的部件。

完整代码

import 'dart:async';
import 'dart:convert';

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;

// 数据如何请求
Future<Post> fetchPost() async {
  final response =
      await http.get('https://jsonplaceholder.typicode.com/posts/1');

  if (response.statusCode == 200) {
    return Post.fromJson(json.decode(response.body));
  } else {
    throw Exception('Failed to load post');
  }
}

// 建模
class Post {
  final int userId;
  final int id;
  final String title;
  final String body;

  Post({this.userId, this.id, this.title, this.body});

  factory Post.fromJson(Map<String, dynamic> json) {
    return Post(
      userId: json['userId'],
      id: json['id'],
      title: json['title'],
      body: json['body'],
    );
  }
}

// 一开始就发起请求
void main() => runApp(MyApp(post: fetchPost()));

class MyApp extends StatelessWidget {
  final Future<Post> post;

  MyApp({Key key, this.post}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Fetch Data Example',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: Scaffold(
        appBar: AppBar(
          title: Text('Fetch Data Example'),
        ),
        body: Center(
          child: FutureBuilder<Post>( // 这里的 FutureBuilder 很方便
            future: post,
            builder: (context, snapshot) {
              if (snapshot.hasData) {
                return Text(snapshot.data.title); // 获取 title 并展示
              } else if (snapshot.hasError) {
                return Text("${snapshot.error}");
              }
                
              // 加载中
              return CircularProgressIndicator();
            },
          ),
        ),
      ),
    );
  }
}
复制代码

看起来只有 FutureBuilder 需要特别关注一下。

下节我将请求 LeanCloud 上的自定义数据,并且尝试渲染在列表里。

未完待续……


以上所述就是小编给大家介绍的《Flutter 高效自学笔记(三)——网络请求》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!

查看所有标签

猜你喜欢:

本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们

Python金融衍生品大数据分析:建模、模拟、校准与对冲

Python金融衍生品大数据分析:建模、模拟、校准与对冲

【德】Yves Hilpisch(伊夫·希尔皮斯科) / 蔡立耑 / 电子工业出版社 / 2017-8 / 99.00

Python 在衍生工具分析领域占据重要地位,使机构能够快速、有效地提供定价、交易及风险管理的结果。《Python金融衍生品大数据分析:建模、模拟、校准与对冲》精心介绍了有效定价期权的四个领域:基于巿场定价的过程、完善的巿场模型、数值方法及技术。书中的内容分为三个部分。第一部分着眼于影响股指期权价值的风险,以及股票和利率的相关实证发现。第二部分包括套利定价理论、离散及连续时间的风险中性定价,并介绍......一起来看看 《Python金融衍生品大数据分析:建模、模拟、校准与对冲》 这本书的介绍吧!

JSON 在线解析
JSON 在线解析

在线 JSON 格式化工具

URL 编码/解码
URL 编码/解码

URL 编码/解码

RGB CMYK 转换工具
RGB CMYK 转换工具

RGB CMYK 互转工具