资讯专栏INFORMATION COLUMN

flutter笔记6:试玩flutter的HTTP请求和VScode调试工具

APICloud / 2243人阅读

摘要:集成了使用起来极其简洁的请求对象,参考官方资料,今天就找个调试工具来试试请求,如果想了解更丰富的信息,请参考官方,列表在页面的右边。

Flutter集成了使用起来极其简洁的HTTP请求对象,参考官方资料,今天就找个调试工具来试试HTTP请求,如果想了解更丰富的信息,请参考官方API dart:io,API列表在页面的右边。

第一步

到免费开放http请求API的网站,如聚合数据查询天气,注册一个账号,然后申请这个免费的接口,当然你也可以申请别的免费API,比如我就申请了俩免费接口:

第二步

打开VScode,到终端找一个存放项目代码的目录,输入命令:

flutter create myhttptest

项目文件夹初始化完毕后,用VScode打开项目文件夹->打开main.dart,然后用以下代码覆盖初始化的代码:

import "dart:convert";    //集成了支持json、utf-8等数据格式的编码和解码器
import "dart:io";        //集成了File, socket, HTTP等服务应用的IO库

import "package:flutter/material.dart";

void main() {
  runApp(new MyApp()); 
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
      home: new MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  MyHomePage({Key key}) : super(key: key);

  @override
  _MyHomePageState createState() => new _MyHomePageState();
}

class _MyHomePageState extends State {
  var _ipAddress = "Unknown";  //为啥要定义这个变量呢?为了后面只需要写一次setState()

  //异步执行用到async关键字
  _getIPAddress() async { 
    /*接口url地址,包含了请求地址http://op.juhe.cn/onebox/weather/query和两个参数cityname、AppKey*/
    var url = "http://op.juhe.cn/onebox/weather/query?cityname=上海&key=[替换成你的AppKey]";  
    var httpClient = new HttpClient();

    String result;
    //如同JAVA一样的语法:
    try {
      var request = await httpClient.postUrl(Uri.parse(url));  /*也可以使用httpClient.getUrl,注意根据接口要求改变两种请求方式的参数格式*/
      var response = await request.close();
      if (response.statusCode == HttpStatus.OK) {
        var json = await response.transform(UTF8.decoder).join();
        var data = JSON.decode(json);
        result = data["result"]["data"]["realtime"].toString();    //多维数组,请根据自己请求接口的结果对json数据结构进行拆解
      } else {
        result =
            "Error get:
Http status ${response.statusCode}";    //连接错误提示
      }
    } catch (exception) {
      result = "Failed getting data";  //代码执行异常,抛出错误信息
    }
    //如果当前控件已经被注销掉,则当前控件内置状态为mounted。
    /*由于是前面的HTTP异步请求,如果网络卡住,而当前控件因为其他原因注销掉了,
      此时不必调让代码走到后面的setState()方法,否则会报错,所以这里直接return,避免报错。*/
    if (!mounted) return;

    setState(() {
      _ipAddress = result;    //显示请求结果
    });
  }

  @override
  Widget build(BuildContext context) {
    var spacer = new SizedBox(height: 32.0);

    return new Scaffold(
      body: new Center(
        child: new Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            new RaisedButton(
              onPressed: _getIPAddress,
              child: new Text("获取天气预报"),
            ),
            new Text("$_ipAddress."),
            spacer,
          ],
        ),
      ),
    );
  }
}

注意看上面代码中的注释,用到了mounted,参考API,意思是如果state对象实例创建后在执行initState动作前,会关联上BuildContext对象(对本篇内容好像没什么用),此时内置状态mounted标记为true,如果state对象实例执行了dispose动作,此时mounted=false,意味着此state对象实例已消亡,代码走到setState()方法时就会报错。

第三步

手机连接好电脑后,记得打开WIFI或移动网络。

启用VScode的Debug工具,调试代码,如图所示:

相信有过开发经验的小伙伴理解上图应该没有什么难度,请尽情把玩吧,APP测试效果:

关闭WIFI后,请求失败的响应非常快,不会像浏览器卡一下才弹出出错页面,猜测应该是flutter能够从硬件层探测WIFI或移动网络是否启用吧。

可以看到Dart2语法下的HTTP请求代码非常简洁,比起ES5的回调函数用起来方便多了,其外还支持promise,对熟悉ES6语法的同学有福啦,参考官方API:

HttpClient client = new HttpClient();
client.getUrl(Uri.parse("http://www.example.com/"))
    .then((HttpClientRequest request) {
      // Optionally set up headers...
      // Optionally write to the request object...
      // Then call close.
      ...
      return request.close();
    })
    .then((HttpClientResponse response) {
      // Process the response.
      ...
    });

好啦,今天就介绍到这里,本篇比较简单,嫌太少的同学可以去文中引用的官方网站练练英语,偷个懒,哈哈哈,感谢大家捧场~
flutter 中文社区(官方QQ群:338252156)

文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。

转载请注明本文地址:https://www.ucloud.cn/yun/93402.html

相关文章

  • flutter入门实践到可开发

    摘要:继上一篇关于的介绍,是仿照微信界面,因为作为前端开发,有一定的基础,所有写起来,也不是很吃力。班门弄斧之作,若有大神见到,敬请指教,有不对不合理之处,敬请指出我是迩伶贰环境准备以系统为例。 flutter的入门记录 0.前言: flutter 的入门demo 已经写好一个星期了,只不过一直都没有整理出博客来。收拾好心情,来整理一下。继上一篇关于react-native-wx的介绍,是仿...

    _DangJin 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<