内容简介:首先我要知道如何打 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 packages get
- 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 高效自学笔记(三)——网络请求》,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对 码农网 的支持!
猜你喜欢:- 网络安全自学篇(二十二)| 基于机器学习的恶意请求识别及安全领域中的机器学习
- 自学 Android 开发的正确姿势,非常值得准备自学的同学瞧一眼
- Python自学之路
- 如何自学PHP?
- 开源机器人自学指南
- 自学NodeJS设置Header
本站部分资源来源于网络,本站转载出于传递更多信息之目的,版权归原作者或者来源机构所有,如转载稿涉及版权问题,请联系我们。