基于Http实现网络操作

一、

二、

什么是Http？

Http是Flutter用于网络请求的跨平台的插件。

三、如何用http库做get请求？

--在pubspec.yaml中引入http插件；

--调用http.get发送请求

 

1、http.get()返回一个包含http.Response的Future：

Futrue:是与异步操作一起工作的核心Dart类。它用于表示未来某个时间可能会出现的可用值或错误；

http.Response:类包含一个成功的HTTP请求接收到的数据；

 

四、如何用http库做post请求？

--在pubspec.yaml中引入http插件

--调用http.post发送请求

 

1、http.post()返回一个包含http.Response的Future:

Future:是与异步操作一起工作的核心Dart类。它用于表示未来某个时间可能会出现的可用值或错误；

2、http.Response:类包含一个成功的HTTP请求接收到的数据

五、如何将Response转换成Dart object?

虽然发出网络请求很简单，但如果要使用原始的Future<http.Response>并不简单。为了让我们更加方便地写代码，可用将http.Response转换成我们自己的Dart对象。

1、创建一个CommonModel类

首先需要创建一个CommonModel类，它包含我们网络请求的数据。它还将包括一个工厂构造函数，它允许我们可用通过json创建一个CommonModel对象。

 

2、将http.Response转换成一个CommonModel对象

现在，将更新fetchPost函数以后返回一个Future<Post>。为此，我们需要

①使用 dart:convert package 将响应内容转化为一个 json Map；

②使用fromJson工厂函数，将json Map转化为一个CommonModel对象

 

result实际上就是一个map

六、

请求并展示数据

七、代码

import 'dart:convert';

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

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() =>_MyAppState();
}

class _MyAppState extends State<MyApp>{
  String showResult='';
  Future<CommonModel> fetchPost() async{
    final response= await http.get('http://www.devio.org/io/flutter_app/json/test_common_model.json');
    final result=json.decode(response.body);
    return CommonModel.fromJson(result);
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text('Http')),
        body: Column(
          children: <Widget>[
            InkWell(
              onTap: (){
                fetchPost().then((CommonModel value){
                  setState(() {
                    showResult='请求结果：\nhideAppBar:${value.hideAppBar}\nicon:${value.icon}';
                  });
                });
              },
              child: Text('点我',style: TextStyle(fontSize: 26)),
            ),
            Text(showResult)
          ],
        ),
      ),
    );
  }
}

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

八、请求过程

1、首先从下面的网址获取请求数据

2、这个网址返回的是一个json数据

 

3、将json数据转化成一个map

 

4、调用CommonModel.fromJson()将Map类型数据转化成result

 

 

因为key是String类型的，但是值是dynamic动态类型的，所以需要将动态类型转化为实际类型，所以需要将动态类型转化为实际类型。这里根据key、value的方式构造工厂方法，这样就可以获取到从网络上返回的具体的数据

 

5、最终调用fetchPost()，返回CommonModel,而且它是Future类型的，泛型里面是CommonModel

 

6、

当点击屏幕的时候调用onTap()方法

onTap()方法里面调用fetchPost(),它返回Futrue<CommonModel>,可以通过调用Future<>的then（）方法返回正确的值value，这个值就是泛型，也就是Model，然后就可以通过"."的方式来获取model里面的数据

通过setState()方法将结果设置到showResult上面

 

7、底部有一个Text，用来显示showResult