浅尝flutter中的http请求

时间 2019-12-07

标签浅尝 flutter http 请求栏目 HTTP/TCP 繁體版

原文原文链接

本篇教程聊一聊flutter中http的坑，阅读本教程以前假设你已经掌握了flutter的一些基础知识，好比环境搭建，简单的dart语法，及flutter组件化思想。前端

由于我是前端，因此数据交互逻辑都是之前端的思想设计，若是有不对的地方，欢迎你们指正。python

先看效果图ajax

整个页面就是一个长list新闻列表，后台是本身用django写的，数据是python爬的，咱们先写一个新闻的模板，效果如图：django

咱们先新建一个模板的文件News.dart,代码以下：

import 'package:flutter/material.dart';

class News extends StatefulWidget {
  final String title,imglink; 
  News(this.title,this.imglink);
  @override
  createState() => new NewsState();  
}
class NewsState extends State<News> {
  @override
  Widget  build(BuildContext context){   
    return new Center(
     child:new Container(
       height: 120.0,
       padding:new EdgeInsets.only(left:20.0,right:20.0),
       decoration: new BoxDecoration(
         border:new Border(
           bottom: new BorderSide(width: 1.0,color:const Color(0xff999999))
         )
       ),
       child: new Row(
         mainAxisAlignment: MainAxisAlignment.spaceEvenly,
         children: <Widget>[
           new Expanded(
             flex:2,
             child: new Column(
               crossAxisAlignment: CrossAxisAlignment.start,
               mainAxisAlignment:MainAxisAlignment.spaceBetween ,
               children: <Widget>[
                 new Container(
                   padding:new EdgeInsets.only(top:15.0),
                   decoration: new BoxDecoration(
                   ),
                   child:new Text(
                     widget.title,
                     style: new TextStyle(
                       fontSize: 18.0
                     ),
                   ),
                 ),
                  new Container(
                   padding:const EdgeInsets.only(right:13.0,bottom:15.0),
                   decoration: new BoxDecoration(
                   ),
                   child:new Row(
                     mainAxisAlignment: MainAxisAlignment.spaceBetween,
                     children: <Widget>[
                       new Text(
                         '本地新闻',
                       ),
                        new Text(
                         '2018-03-11',
                       ),
                     ],
                   )
                 
                 ),
               ],
             ),
           ),
           new Expanded(
             flex:1,
             child: new Image.network(
               widget.imglink,
               scale: 1.0,
               fit: BoxFit.cover,
             ),
           ),
         ],
       ),
     ),
    );
  }
}

复制代码

关于这个模板页面，前面有教程，你们能够自行前去浅尝flutter中的flex布局查看浏览器

如今开始重点，咱们在flutter中进行网络请求，首先到导入两个包：bash

import 'dart:io';网络

import 'dart:convert';app

so异步

import 'package:flutter/material.dart';
import './News.dart';
import 'dart:io';
import 'dart:convert';
复制代码

而后异步请求数据，代码以下：async

List<Map <String,String>> newTitle=[];
       _get() async {
         var responseBody;
         var url='http://127.0.0.1:8000/yt/getapp/';
         var httpClient = new HttpClient();
         var request = await httpClient.getUrl(Uri.parse(url));
         var response = await request.close();
         if (response.statusCode == 200) {
           responseBody = await response.transform(utf8.decoder).join();
           responseBody=JSON.decode(responseBody);
         }else{
           print("error");
         }
         await responseBody['msg'].map((Map item){
           newTitle.add(item);
         }).toList();     
       }
复制代码

整个逻辑也不会麻烦，因此所有代码以下：

import 'package:flutter/material.dart';
import './News.dart';
import 'dart:io';
import 'dart:convert';
class TabPage3 extends StatefulWidget {
 @override
 createState() => new TabPage3States();  
}
class TabPage3States extends State<TabPage3> {
 @override
 Widget build(BuildContext context) {
       List<Map <String,String>> newTitle=[];
       _get() async {
         var responseBody;
         var url='http://127.0.0.1:8000/yt/getapp/';
         var httpClient = new HttpClient();
         var request = await httpClient.getUrl(Uri.parse(url));
         var response = await request.close();
         if (response.statusCode == 200) {
           responseBody = await response.transform(utf8.decoder).join();
           responseBody=JSON.decode(responseBody);
         }else{
           print("error");
         }
         await responseBody['msg'].map((Map item){
           newTitle.add(item);
         }).toList();     
       }
         _get();
     return new ListView(
           children: newTitle.map((Map  item){
         return  new News(item['title'],item['imglinks']);//News接收2个参数（标题和图片url）
       }).toList(),
     );
 }
}


复制代码

这样run的话，确定会抛错的，第一个坑：

var url='http://127.0.0.1:8000/yt/getapp/';
复制代码

这个接口是我本身用django写的，ajax测试彻底没有问题，可是在在模拟器上会报一个莫名其妙的错误，我明明是8000端口，它报错38588有毛病：

莫名其妙的错误让人防不胜防，可是我也不是一个错误就能吓到的，通过我多方查资料，大概意思就是Android底层是Linux内核，它自己就是一个操做系统，因此咱们在模拟器的浏览器中输入127.0.0.1所表明的是Android模拟器（Android吸泥机），并非你的电脑，因此在模拟器中会出错。在Android操做系统中，将本地电脑映射为10.0.2.2，因此只须要改为10.0.2.2就ok了。由于我这个接口是本身写的，因此还须要在django的settings中配置一下：

ALLOWED_HOSTS = [
   '10.0.2.2',
   '127.0.0.1'
   ]
复制代码

第二个坑，由于咱们_get()是异步操做，ListView里面newTitle的值始终是空

return new ListView(
           children: newTitle.map((Map  item){
         return  new News(item['title'],item['imglinks']);//item==>null
       }).toList(),
     );
复制代码

解决这个问题的过程很曲折，花了两天时间，解决办法很简单，就是把_get()放到build外面去，还有个办法就是，获取future类型函数的返回值，传送门flutter实战3：制做新闻分类列表。

最后贴上所有代码：

import 'package:flutter/material.dart';
import './News.dart';
import 'dart:io';
import 'dart:convert';

class TabPage3 extends StatefulWidget {
  @override
  createState() => new TabPage3States();  
}
class TabPage3States extends State<TabPage3> {
  @override
  List<Map <String,String>> newTitle=[];
        _get() async {
          // List<Map> _newTitle=new List();
          var responseBody;
          var url='http://10.0.2.2:8000/yt/getapp/';
          var httpClient = new HttpClient();
          var request = await httpClient.getUrl(Uri.parse(url));
          var response = await request.close();
          if (response.statusCode == 200) {
            responseBody = await response.transform(utf8.decoder).join();
            responseBody=JSON.decode(responseBody);
          }else{
            print("error");
          }
          await responseBody['msg'].map((Map item){
            newTitle.add(item);
          }).toList();     
          }
  Widget build(BuildContext context) {
          _get();
  
      return new ListView(
            children: newTitle.map((Map  item){
          return  new News(item['title'],item['imglinks']);
        }).toList(),
      );
  }
}

复制代码

代码都是参考官网英文文档撸的，可是本人是英语渣，因此若是有不对的地方，欢迎你们指正！