Dart和Flutter提供了工具來(lái)完成訪問(wèn)網(wǎng)絡(luò)連接的工作。

一、指引

1. 添加http包
2. 使用http包來(lái)生成網(wǎng)絡(luò)請(qǐng)求
3. 轉(zhuǎn)換response到一個(gè)Dart對(duì)象
4. 使用Flutter展示數(shù)據(jù)

1. 添加http包

http 提供了最簡(jiǎn)單的房還是來(lái)訪問(wèn)網(wǎng)絡(luò)的數(shù)據(jù)。
安裝http包，我們需要pubspec.yaml增加依賴。我們 可以在[pub website]找到最新的版本來(lái)安裝(https://pub.dartlang.org/packages/http#-installing-tab-).

dependencies: http: <latest_version>

2. 使用http包來(lái)生成網(wǎng)絡(luò)請(qǐng)求

在這個(gè)例子里，我們使用在JSONPlaceholder REST API里面的 http.get()來(lái)發(fā)送一個(gè)請(qǐng)求。

Future<http.Response> fetchPost() { return http.get('https://jsonplaceholder.typicode.com/posts/1'); }

http.get()方法返回包含Response的一個(gè)Future

• Future是Dart類的一個(gè)核心同步操作。它用于表示將來(lái)某個(gè)時(shí)候可用的潛在值或錯(cuò)誤。

• http.Response 類包含從成功的http調(diào)用接收的數(shù)據(jù)。

3. 轉(zhuǎn)換response到一個(gè)Dart對(duì)象

雖然很容易發(fā)送一個(gè)網(wǎng)絡(luò)請(qǐng)求，但是使用原始的Future<http.Response>并不是很便。為了讓我們的更容易處理，可以將http.Response轉(zhuǎn)換為我們自己的Dart對(duì)象。

創(chuàng)建一個(gè)Post類

首先，我們需要?jiǎng)?chuàng)建一個(gè)包含來(lái)自網(wǎng)絡(luò)請(qǐng)求的數(shù)據(jù)的Post類。它還將包括一個(gè)工廠構(gòu)造器，允許我們從json創(chuàng)建Post。

手動(dòng)轉(zhuǎn)換JSON只是其中一個(gè)選擇。有關(guān)更多信息，請(qǐng)參閱關(guān)于JSON和序列化。

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

將http.Response轉(zhuǎn)換為Post。

現(xiàn)在，我們將更新fetchPost函數(shù)以返回<Post>。為此，我們需要：

1.將響應(yīng)主體轉(zhuǎn)換為帶有dart包的jsonMap。
2.如果服務(wù)器返回狀態(tài)碼為200的"OK"響應(yīng)，則使用fromJson工廠將jsonMap轉(zhuǎn)換為Post。
3.如果服務(wù)器返回意外響應(yīng)，則拋出錯(cuò)誤

Future<Post> fetchPost() async { final response = await http.get('https://jsonplaceholder.typicode.com/posts/1');if (response.statusCode == 200) { // If server returns an OK response, parse the JSON return Post.fromJson(json.decode(response.body)); } else { // If that response was not OK, throw an error. throw Exception('Failed to load post'); } }

萬(wàn)歲！現(xiàn)在我們有了一個(gè)函數(shù)，我們可以調(diào)用它來(lái)從互聯(lián)網(wǎng)上獲取一篇文章！

4. 使用Flutter展示數(shù)據(jù)

為了使獲取的數(shù)據(jù)可以在屏幕上顯示，我們使用FutureBuilder控件。FutureBuilder 控件附帶了Flutter，使得使用異步數(shù)據(jù)源變得容易。

我們必須提供兩個(gè)參數(shù)：
1.在這個(gè)例子中，我們將調(diào)用Futrue中的fetchPost()函數(shù)

2. 一個(gè)builder函數(shù)，告訴Flutter要呈現(xiàn)什么，這取決于Future的狀態(tài)：加載、成功或錯(cuò)誤。

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

5.將獲取調(diào)用移出“build()”方法

盡管很方便，但是不建議在build()方法中調(diào)用API。

每當(dāng)Flutter想要更改視圖中的任何內(nèi)容時(shí)，它都會(huì)調(diào)用build()方法，而這種情況經(jīng)常出人意料地發(fā)生。如果在`build()'方法中留下fetch調(diào)用，則API中將充斥著不必要的調(diào)用，并減慢應(yīng)用程序的速度。

以下是一些更好的選擇，因此它只會(huì)在頁(yè)面最初加載時(shí)命中API。

將其傳遞到StatelessWidget中

使用這個(gè)策略，父小部件負(fù)責(zé)調(diào)用fetch方法，存儲(chǔ)其結(jié)果，然后將其傳遞給小部件。

class MyApp extends StatelessWidget { final Future<Post> post;MyApp({Key key, this.post}) : super(key: key);

您可以在下面的完整示例中看到這個(gè)示例的工作示例。

在StatefulWidget狀態(tài)的生命周期中調(diào)用它

如果您的小部件是有狀態(tài)的，您可以在initState'](https://docs.flutter.io/flutter/widgets/State/initState.html)或[didChangeDependencies'方法中調(diào)用獲取方法。

initstate被調(diào)用一次，然后再也不會(huì)調(diào)用。如果您想選擇重新加載API以響應(yīng)[inheritedWidget]（https://docs.flutter.io/flutter/widgets/inheritedWidget class.html）更改，請(qǐng)將調(diào)用放入didchangeDependencies方法。更多詳情請(qǐng)參見(jiàn)[state]（https://docs.flutter.io/flutter/widgets/state class.html）。

class _MyAppState extends State<MyApp> { Future<Post> post;@override void initState() { super.initState(); post = fetchPost(); }

測(cè)試

有關(guān)如何測(cè)試此功能的信息，請(qǐng)參閱以下文章：

• Introduction to unit testing
• Mock dependencies using Mockito

完整例子

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) { // If the call to the server was successful, parse the JSON return Post.fromJson(json.decode(response.body)); } else { // If that call was not successful, throw an error. 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>( future: post, 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(); }, ), ), ), ); } } 

二、效果圖

三、原文鏈接

1.Flutter初步探索（四）網(wǎng)絡(luò)連接

四、參考文檔

1.Fetch data from the internet

五、公眾號(hào)

不器猿
本頁(yè)內(nèi)容由塔燈網(wǎng)絡(luò)科技有限公司通過(guò)網(wǎng)絡(luò)收集編輯所得，所有資料僅供用戶學(xué)習(xí)參考，本站不擁有所有權(quán)，如您認(rèn)為本網(wǎng)頁(yè)中由涉嫌抄襲的內(nèi)容，請(qǐng)及時(shí)與我們聯(lián)系，并提供相關(guān)證據(jù)，工作人員會(huì)在5工作日內(nèi)聯(lián)系您，一經(jīng)查實(shí)，本站立刻刪除侵權(quán)內(nèi)容。本文鏈接:http://www.cokiv.cn/18046.html