Flutter Http网络请求(3.2)

JsonToDart插件安装

有朋友可能会问到了什么是JsonToDart?
JsonToDart是将Json转换为Dart对象类的插件,用来解析网络数据,类似于Android中的GsonFromat.

Flie -> Settings… -> Plugins

安装之后需要重新启动即可.

JsonToDart使用

第一步:
在需要使用的时候,new JsonTo Dart

或者使用快捷键 Alt ＋shift ＋D

第二步:
Class Name是解析的名字
Json Text是Json数据
点击右上角的Format可以格式化一下

创建完成的数据如下:

/// id : 6503
/// uuid : "6c7697d2-46e1-413b-a40c-11a999bfd0db"
/// hitokoto : "我们把世界看错，反说它欺骗了我们。"
/// type : "k"
/// from : "飞鸟集"
/// from_who : "泰戈尔"
/// creator : "恏戋余"
/// creator_uid : 7045
/// reviewer : 6844
/// commit_from : "app"
/// created_at : "1598342433"
/// length : 17

class ChickenSoupBean {
  int _id;
  String _uuid;
  String _hitokoto;
  String _type;
  String _from;
  String _fromWho;
  String _creator;
  int _creatorUid;
  int _reviewer;
  String _commitFrom;
  String _createdAt;
  int _length;

  int get id => _id;
  String get uuid => _uuid;
  String get hitokoto => _hitokoto;
  String get type => _type;
  String get from => _from;
  String get fromWho => _fromWho;
  String get creator => _creator;
  int get creatorUid => _creatorUid;
  int get reviewer => _reviewer;
  String get commitFrom => _commitFrom;
  String get createdAt => _createdAt;
  int get length => _length;

  ChickenSoupBean({
      int id, 
      String uuid, 
      String hitokoto, 
      String type, 
      String from, 
      String fromWho, 
      String creator, 
      int creatorUid, 
      int reviewer, 
      String commitFrom, 
      String createdAt, 
      int length}){
    _id = id;
    _uuid = uuid;
    _hitokoto = hitokoto;
    _type = type;
    _from = from;
    _fromWho = fromWho;
    _creator = creator;
    _creatorUid = creatorUid;
    _reviewer = reviewer;
    _commitFrom = commitFrom;
    _createdAt = createdAt;
    _length = length;
}

  ChickenSoupBean.fromJson(dynamic json) {
    _id = json["id"];
    _uuid = json["uuid"];
    _hitokoto = json["hitokoto"];
    _type = json["type"];
    _from = json["from"];
    _fromWho = json["from_who"];
    _creator = json["creator"];
    _creatorUid = json["creator_uid"];
    _reviewer = json["reviewer"];
    _commitFrom = json["commit_from"];
    _createdAt = json["created_at"];
    _length = json["length"];
  }

  Map<String, dynamic> toJson() {
    var map = <String, dynamic>{};
    map["id"] = _id;
    map["uuid"] = _uuid;
    map["hitokoto"] = _hitokoto;
    map["type"] = _type;
    map["from"] = _from;
    map["from_who"] = _fromWho;
    map["creator"] = _creator;
    map["creator_uid"] = _creatorUid;
    map["reviewer"] = _reviewer;
    map["commit_from"] = _commitFrom;
    map["created_at"] = _createdAt;
    map["length"] = _length;
    return map;
  }

}

如何获取接口Json数据

方法一:
可以将接口放到百度直接搜索:

接口为: https://v1.hitokoto.cn/

方法二:
可以使用工具(我是用的PostMan)

工具的好处:
可以请求Post数据,而在百度搜索只能请求get数据

想了解这个工具的可以去我的百度网盘下载或直接扫二维码即可:
链接：https://pan.baidu.com/s/1Og2ArEg9SCtvQgifO2k1vw
提取码：whjh

Http.get请求

Http请求需要添加依赖:
http: ^0.12.2

导包为:

• import ‘package:http/http.dart’ as http;//http导包
• import ‘dart:convert’; //序列化

/**
   *   异步请求网络数据
   */
  Future<ChickenSoupBean> _HttpGet() async {
  									//请求Url接口
    final responce = await http.get("https://v1.hitokoto.cn/");

    print("statusCode = ${responce.statusCode}body:${responce.body}");

    //序列化返回数据
    final decode = json.decode(responce.body);
    return ChickenSoupBean.fromJson(decode);
  }

Future async await 是关键字,用来进行异步操作

• responce.statusCode 响应码数据返回成功为200
• responce.body 网络请求Json数据

ChickenSoupBean是使用GsonToDart获取到的Bean类

获取请求数据并展示

String _mValue = "";

 _HttpGet().then((ChickenSoupBean value)  {
          setState(() {
            _mValue =  value.hitokoto;
             print("value:${value}");
            });
         });

完整代码:

import 'package:flutter/material.dart';
import 'package:flutter_trip/beans/chicken_soup_bean.dart';
import 'package:http/http.dart' as http;
import 'dart:convert';

class SearchPage extends StatefulWidget {
  @override
  _SearchPageState createState() => _SearchPageState();
}

class _SearchPageState extends State<SearchPage> {

  String _mValue = "";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: (Text("搜索")),
      ),
      body: Center(
          child: Column(
        children: [
          InkWell(
            onTap: () {
              _HttpGet().then((ChickenSoupBean value)  {
                    setState(() {
                      _mValue =  value.hitokoto;
                      print("value${value}");
                    });
                  });
            },
            child: Container(
              margin: EdgeInsets.only(top: 20),
              child: Text("点我获取Http网络数据"),
            ),
          ),
          Container(
            child: Text(_mValue),
          )
        ],
      )),
    );
  }

  /**
   *   异步请求网络数据
   */
  Future<ChickenSoupBean> _HttpGet() async {
    final responce = await http.get("https://v1.hitokoto.cn/");

    print("statusCode = ${responce.statusCode}body:${responce.body}");

    //序列化返回数据
    final decode = json.decode(responce.body);
    return ChickenSoupBean.fromJson(decode);
  }
}

来看看最终的效果吧:
效果图(1.1):

完整代码

上一章:Flutter 自定义AppBar,轮子Banner(3.1)

下一章:Flutter Future与FutureBuilder异步操作(3.3)

原创不易,您的点赞就是对我最大的支持,留下您的点赞吧~