淺嘗flutter中的http請求

本篇教程聊一聊flutter中http的坑蝌麸，閱讀本教程之前假設(shè)你已經(jīng)掌握了flutter的一些基礎(chǔ)知識，比如環(huán)境搭建，簡單的dart語法咆槽，及flutter組件化思想。

因為我是前端圈纺，所以數(shù)據(jù)交互邏輯都是以前端的思想設(shè)計秦忿，如果有不對的地方，歡迎大家指正赠堵。

先看效果圖

效果圖

整個頁面就是一個長list新聞列表小渊，后臺是自己用django寫的，數(shù)據(jù)是python爬的茫叭，我們先寫一個新聞的模板酬屉，效果如圖：

模板

我們先新建一個模板的文件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,
             ),
           ),
         ],
       ),
     ),
    );
  }
}

關(guān)于這個模板頁面，前面有教程揍愁，大家可以自行前去淺嘗flutter中的flex布局查看

現(xiàn)在開始重點呐萨，我們在flutter中進行網(wǎng)絡(luò)請求，首先到導(dǎo)入兩個包：

import 'dart:io';

import 'dart:convert';

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

然后異步請求數(shù)據(jù)莽囤，代碼如下：

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個參數(shù)（標(biāo)題和圖片url）
       }).toList(),
     );
 }
}

這樣run的話，肯定會拋錯的朽缎，第一個坑：

 var url='http://127.0.0.1:8000/yt/getapp/';

這個接口是我自己用django寫的惨远，ajax測試完全沒有問題，但是在在模擬器上會報一個莫名其妙的錯誤话肖，我明明是8000端口北秽，它報錯38588有毛病：

端口錯誤

莫名其妙的錯誤讓人防不勝防最筒，但是我也不是一個錯誤就能嚇到的贺氓，經(jīng)過我多方查資料，大概意思就是Android底層是Linux內(nèi)核床蜘，它本身就是一個操作系統(tǒng)辙培，所以我們在模擬器的瀏覽器中輸入127.0.0.1所代表的是Android模擬器（Android吸泥機）蔑水，并不是你的電腦，所以在模擬器中會出錯扬蕊。在Android操作系統(tǒng)中搀别，將本地電腦映射為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類型函數(shù)的返回值府适，傳送門flutter實戰(zhàn)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(),
      );
  }
}

代碼都是參考官網(wǎng)英文文檔擼的，但是本人是英語渣檐春，所以如果有不對的地方逻淌，歡迎大家指正！