【Flutter】HTTP 网络操作 ( 引入 http 插件 | 测试网站 | Get 请求 | Post 请求 | 将响应结果转为 Dart 对象 | Future 异步调用 )

文章目录

• • 
    
• ​​一、引入 http 插件​​
• ​​二、HTTP 请求测试数据​​
• ​​三、使用 http 插件进行 Get 请求​​
• ​​四、使用 http 插件进行 Post 请求​​
• ​​五、将 Get / Post 请求结果 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 插件 :​ 点击右上角的 " Pub get " 按钮 , 获取插件 , 此时会自动从 ​​https://pub.dev/packages​​ 平台下载该插件并配置到 Flutter 项目中 ;

​③ 在项目中引入 :​ 在需要使用 Banner 轮播插件 flutter_swiper 的组件代码中导入该 dart 包 ;

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

二、HTTP 请求测试数据

​在网上找了几个 json 数据链接 :​

• ​​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 插件进行 Get 请求

引入 http 插件后 ,

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

调用 http.get 方法 , 发送 Get 请求 , 会返回一个包括 http.Response 泛型的 Future , 返回值类型为 Future<http.Response> ;

/// 调用 Http Get 方法 , 获取服务器的 json 数据
  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 是 异步操作 相关的核心 Dart 类 , 用于表示 将来 某个时间 可能出现的结果 ;

http.Get 返回值是 Future<http.Response> , 其中的 http.Response 泛型中 , 封装了 HTTP Request 请求对应的 Response 响应数据 , 也就是服务器返回给请求端的数据 ;

四、使用 http 插件进行 Post 请求

引入 http 插件后 ,

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

调用 http.get 方法 , 发送 Get 请求 , 会返回一个包括 http.Response 泛型的 Future , 返回值类型为 Future<http.Response> ;

/// 调用 Http Post 方法 , 获取服务器的 json 数据
  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 是 异步操作 相关的核心 Dart 类 , 用于表示 将来 某个时间 可能出现的结果 ;

http.Get 返回值是 Future<http.Response> , 其中的 http.Response 泛型中 , 封装了 HTTP Request 请求对应的 Response 响应数据 , 也就是服务器返回给请求端的数据 ;

五、将 Get / Post 请求结果 Future 转为 Dart 对象

将 Get / Post 请求结果 Future<http.Response> 转为 Dart 对象 :

创建 Model 类 , 用于存储获取的结果 , 参考 ​​https://jsonplaceholder.typicode.com/posts/1​​ 中的 json 数据创建 Dart 类 ;

CommonModel 类包括一个工厂方法 , 通过 Map<String, dynamic> json 类型 , 构造该类 ;

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 对象 :​ 需要使用 dart:convert 包 , 将 json 字符串转为 Map<String, dynamic> 类型数据 ;

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

然后将 Map<String, dynamic> 类型对象传入 CommonModel 类工厂方法 ;

六、Future 异步调用

点击按钮后 , 调用 HTTP GET 方法 , 由于不知道什么时候返回 , 该方法肯定是一个异步方法 ;

返回值是 Future 类型的 ;

/// 调用 Http Get 方法 , 获取服务器的 json 数据
  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);
  }

下面是按钮设置的点击方法 :

InkWell(
              child: Text("点击按钮进行 HTTP GET 请求"),

              onTap: (){
                /// httpGet() 方法返回 Future 类型返回值
                ///   调用 Future 的 then 方法 , 就会在网络请求成功后 , 执行该方法
                ///   也就是网络请求成功后 , 会自动调用该 then 方法
                ///   传入 Future 的泛型 CommonModel 对象作为参数
                httpGet().then((CommonModel value) {
                  // httpGet 异步返回时 , 回调该方法
                  setState(() {
                    httpGetResult =
                      "HTTP GET 请求结果 :\nuserId : ${value.icon}\n" +
                          "title : ${value.title}\nurl : ${value.url}";
                  });
                });
              },
            ),

​在按钮点击的时候 , 调用 httpGet() 方法 , 返回值是一个 Future 对象 ;​

​调用 Future 的 then 方法 , 就会在网络请求成功后 , 执行该方法 , 也就是网络请求成功后 , 会自动调用该 then 方法 , 传入 Future 的泛型 CommonModel 对象作为参数 ;​

最后获取到返回值后 , 将返回值设置到 httpGetResult 成员中 ;

调用 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 = "";

  /// 调用 Http Get 方法 , 获取服务器的 json 数据
  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);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(

        appBar: AppBar(
          title: Text("HTTP Get 请求"),
        ),

        // 线性布局 列
        body: Column(
          children: [

            // 按钮
            InkWell(
              child: Text("点击按钮进行 HTTP GET 请求"),

              onTap: (){
                /// httpGet() 方法返回 Future 类型返回值
                ///   调用 Future 的 then 方法 , 就会在网络请求成功后 , 执行该方法
                ///   也就是网络请求成功后 , 会自动调用该 then 方法
                ///   传入 Future 的泛型 CommonModel 对象作为参数
                httpGet().then((CommonModel value) {
                  // httpGet 异步返回时 , 回调该方法
                  setState(() {
                    httpGetResult =
                      "HTTP GET 请求结果 :\nuserId : ${value.icon}\n" +
                          "title : ${value.title}\nurl : ${value.url}";
                  });
                });
              },
            ),


            // 在该 Text 组件显示 HTTP GET 请求结果
            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'],
    );
  }
}

​运行结果 :​

八、相关资源

​参考资料 :​

• • 
    
• ​Flutter 官网 :​ ​​https://flutter.dev/​​
• ​Flutter 插件下载地址 :​ ​​https://pub.dev/packages​​
• ​Flutter 开发文档 :​ ​​https://flutter.cn/docs​​ ​( 强烈推荐 )​
• ​官方 GitHub 地址​ : ​​https://github.com/flutter​​
• ​Flutter 中文社区 :​ ​​https://flutter.cn/​​
• ​Flutter 实用教程 :​ ​​https://flutter.cn/docs/cookbook​​
• ​Flutter CodeLab :​ ​​https://codelabs.flutter-io.cn/​​
• ​Dart 中文文档 :​ ​​https://dart.cn/​​
• ​Dart 开发者官网 :​ ​​https://api.dart.dev/​​
• ​Flutter 中文网 :​ ​​https://flutterchina.club/​​​ , ​​http://flutter.axuer.com/docs/​​
• ​Flutter 相关问题 :​ ​​https://flutterchina.club/faq/​​ ( 入门阶段推荐看一遍 )
• ​Flutter 实战电子书 :​ ​​https://book.flutterchina.club/chapter1/​​
  
  • 
    

​重要的专题 :​

• ​Flutter 动画参考文档 :​ ​​https://flutterchina.club/animations/​​

​博客源码下载 :​

• • 
    
• ​GitHub 地址 :​ ​​​​https://github.com/han1202012/flutter_http​​​​( 随博客进度一直更新 , 有可能没有本博客的源码 )
  
• •