文章目錄

• 一、引入 http 插件
• 二、HTTP 請求測試數(shù)據(jù)
• 三、使用 http 插件進(jìn)行 Get 請求
• 四、使用 http 插件進(jìn)行 Post 請求
• 五、將 Get / Post 請求結(jié)果 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 插件 : 點(diǎn)擊右上角的 " Pub get " 按鈕 , 獲取插件 , 此時會自動從 https://pub.dev/packages 平臺下載該插件并配置到 Flutter 項(xiàng)目中 ;

③ 在項(xiàng)目中引入 : 在需要使用 Banner 輪播插件 flutter_swiper 的組件代碼中導(dǎo)入該 dart 包 ;

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

二、HTTP 請求測試數(shù)據(jù)

---

在網(wǎng)上找了幾個 json 數(shù)據(jù)鏈接 :

• 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 插件進(jìn)行 Get 請求

---

引入 http 插件后 ,

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

調(diào)用 http.get 方法 , 發(fā)送 Get 請求 , 會返回一個包括 http.Response 泛型的 Future , 返回值類型為 Future<http.Response> ;

/// 調(diào)用 Http Get 方法 , 獲取服務(wù)器的 json 數(shù)據(jù)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 是 異步操作 相關(guān)的核心 Dart 類 , 用于表示 將來 某個時間 可能出現(xiàn)的結(jié)果 ;

http.Get 返回值是 Future<http.Response> , 其中的 http.Response 泛型中 , 封裝了 HTTP Request 請求對應(yīng)的 Response 響應(yīng)數(shù)據(jù) , 也就是服務(wù)器返回給請求端的數(shù)據(jù) ;

四、使用 http 插件進(jìn)行 Post 請求

---

引入 http 插件后 ,

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

調(diào)用 http.get 方法 , 發(fā)送 Get 請求 , 會返回一個包括 http.Response 泛型的 Future , 返回值類型為 Future<http.Response> ;

/// 調(diào)用 Http Post 方法 , 獲取服務(wù)器的 json 數(shù)據(jù)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 是 異步操作 相關(guān)的核心 Dart 類 , 用于表示 將來 某個時間 可能出現(xiàn)的結(jié)果 ;

http.Get 返回值是 Future<http.Response> , 其中的 http.Response 泛型中 , 封裝了 HTTP Request 請求對應(yīng)的 Response 響應(yīng)數(shù)據(jù) , 也就是服務(wù)器返回給請求端的數(shù)據(jù) ;

五、將 Get / Post 請求結(jié)果 Future<http.Response> 轉(zhuǎn)為 Dart 對象

---

將 Get / Post 請求結(jié)果 Future<http.Response> 轉(zhuǎn)為 Dart 對象 :

創(chuàng)建 Model 類 , 用于存儲獲取的結(jié)果 , 參考 https://jsonplaceholder.typicode.com/posts/1 中的 json 數(shù)據(jù)創(chuàng)建 Dart 類 ;

CommonModel 類包括一個工廠方法 , 通過 Map<String, dynamic> json 類型 , 構(gòu)造該類 ;

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 轉(zhuǎn)換為 CommonModel 對象 : 需要使用 dart:convert 包 , 將 json 字符串轉(zhuǎn)為 Map<String, dynamic> 類型數(shù)據(jù) ;

/// json 序列化 , 反序列化 包 import 'dart:convert';

然后將 Map<String, dynamic> 類型對象傳入 CommonModel 類工廠方法 ;

六、Future 異步調(diào)用

---

點(diǎn)擊按鈕后 , 調(diào)用 HTTP GET 方法 , 由于不知道什么時候返回 , 該方法肯定是一個異步方法 ;

返回值是 Future 類型的 ;

/// 調(diào)用 Http Get 方法 , 獲取服務(wù)器的 json 數(shù)據(jù)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);}

下面是按鈕設(shè)置的點(diǎn)擊方法 :

InkWell(child: Text("點(diǎn)擊按鈕進(jìn)行 HTTP GET 請求"),onTap: (){/// httpGet() 方法返回 Future 類型返回值/// 調(diào)用 Future 的 then 方法 , 就會在網(wǎng)絡(luò)請求成功后 , 執(zhí)行該方法/// 也就是網(wǎng)絡(luò)請求成功后 , 會自動調(diào)用該 then 方法/// 傳入 Future 的泛型 CommonModel 對象作為參數(shù)httpGet().then((CommonModel value) {// httpGet 異步返回時 , 回調(diào)該方法setState(() {httpGetResult ="HTTP GET 請求結(jié)果 :\nuserId : ${value.icon}\n" +"title : ${value.title}\nurl : ${value.url}";});});},),

在按鈕點(diǎn)擊的時候 , 調(diào)用 httpGet() 方法 , 返回值是一個 Future 對象 ;

調(diào)用 Future 的 then 方法 , 就會在網(wǎng)絡(luò)請求成功后 , 執(zhí)行該方法 , 也就是網(wǎng)絡(luò)請求成功后 , 會自動調(diào)用該 then 方法 , 傳入 Future 的泛型 CommonModel 對象作為參數(shù) ;

最后獲取到返回值后 , 將返回值設(shè)置到 httpGetResult 成員中 ;

調(diào)用 setState 方法 , 更新 UI ;

七、完整代碼

---

import 'package:flutter/material.dart'; import 'package:http/http.dart' as http;/// json 序列化 , 反序列化 包 import 'dart:convert';void main() {runApp(MyApp()); }class MyApp extends StatefulWidget {const MyApp({Key? key}) : super(key: key);@override_MyAppState createState() => _MyAppState(); }class _MyAppState extends State<MyApp> {/// HTTP GET 返回值String httpGetResult = "";/// 調(diào)用 Http Get 方法 , 獲取服務(wù)器的 json 數(shù)據(jù)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);}@overrideWidget build(BuildContext context) {return MaterialApp(home: Scaffold(appBar: AppBar(title: Text("HTTP Get 請求"),),// 線性布局 列body: Column(children: [// 按鈕InkWell(child: Text("點(diǎn)擊按鈕進(jìn)行 HTTP GET 請求"),onTap: (){/// httpGet() 方法返回 Future 類型返回值/// 調(diào)用 Future 的 then 方法 , 就會在網(wǎng)絡(luò)請求成功后 , 執(zhí)行該方法/// 也就是網(wǎng)絡(luò)請求成功后 , 會自動調(diào)用該 then 方法/// 傳入 Future 的泛型 CommonModel 對象作為參數(shù)httpGet().then((CommonModel value) {// httpGet 異步返回時 , 回調(diào)該方法setState(() {httpGetResult ="HTTP GET 請求結(jié)果 :\nuserId : ${value.icon}\n" +"title : ${value.title}\nurl : ${value.url}";});});},),// 在該 Text 組件顯示 HTTP GET 請求結(jié)果Text(httpGetResult),],),),);} }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'],);} }

運(yùn)行結(jié)果 :

八、相關(guān)資源

---

參考資料 :

• Flutter 官網(wǎng) : https://flutter.dev/
• Flutter 插件下載地址 : https://pub.dev/packages
• Flutter 開發(fā)文檔 : https://flutter.cn/docs ( 強(qiáng)烈推薦 )
• 官方 GitHub 地址 : https://github.com/flutter
• Flutter 中文社區(qū) : https://flutter.cn/
• Flutter 實(shí)用教程 : https://flutter.cn/docs/cookbook
• Flutter CodeLab : https://codelabs.flutter-io.cn/
• Dart 中文文檔 : https://dart.cn/
• Dart 開發(fā)者官網(wǎng) : https://api.dart.dev/
• Flutter 中文網(wǎng) : https://flutterchina.club/ , http://flutter.axuer.com/docs/
• Flutter 相關(guān)問題 : https://flutterchina.club/faq/ ( 入門階段推薦看一遍 )
• GitHub 上的 Flutter 開源示例 : https://download.csdn.net/download/han1202012/15989510
• Flutter 實(shí)戰(zhàn)電子書 : https://book.flutterchina.club/chapter1/

重要的專題 :

• Flutter 動畫參考文檔 : https://flutterchina.club/animations/

博客源碼下載 :

• GitHub 地址 : https://github.com/han1202012/flutter_http( 隨博客進(jìn)度一直更新 , 有可能沒有本博客的源碼 )

• 博客源碼快照 : https://download.csdn.net/download/han1202012/21528472 ( 本篇博客的源碼快照 , 可以找到本博客的源碼 )

總結(jié)

以上是生活随笔為你收集整理的【Flutter】HTTP 网络操作 ( 引入 http 插件 | 测试网站 | Get 请求 | Post 请求 | 将响应结果转为 Dart 对象 | Future 异步调用 )的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。