使用Flutter怎么實現一個網絡請求

這期內容當中小編將會給大家帶來有關使用Flutter怎么實現一個網絡請求，文章內容豐富且以專業的角度為大家分析和敘述，閱讀完這篇文章希望大家可以有所收獲。

Flutter網絡請求使用的是Dio。Dio是一個強大易用的dart http請求庫，支持Restful API、FormData、攔截器、請求取消、Cookie管理、文件上傳/下載.......

Flutter json數據解析是使用了json_serializable package包。它是一個自動化源代碼生成器，可以為我們生成JSON序列化模板。由于序列化代碼不再由我們手寫和維護，我們將運行時產生JSON序列化異常的風險降至最低。

數據接口

數據是使用的聚合數據的API，影訊API合集，大家可以注冊個賬號，申請使用一下，像這樣

添加依賴

在pubspec.yaml文件中添加所需要的第三方依賴庫

 environment:
 sdk: ">=2.1.0 <3.0.0"

 dependencies:
  flutter:
   sdk: flutter
 
  json_annotation: ^2.0.0
  connectivity: ^0.4.2
  dio: ^2.0.15
  event_bus: ^1.0.3
  # The following adds the Cupertino Icons font to your application.
  # Use with the CupertinoIcons class for iOS style icons.
  cupertino_icons: ^0.1.2
 
 dev_dependencies:
  flutter_test:
   sdk: flutter

網絡請求過程分析

  static netFetch(url,params,Map<String,String> header,Options option,{noTip = false}) async {
   //獲取網絡的連接狀態，如果沒有連接網絡，返回NETWORK_ERROR
   var connectivityResult = await (new Connectivity().checkConnectivity());
   if(connectivityResult == ConnectivityResult.none) {
    return new ResultData(Code.errorHandleFunction(Code.NETWORK_ERROR, "", noTip),false,Code.NETWORK_ERROR);
   }
   //請求頭存放集合
   Map<String,String> headers = new HashMap();
   if(header != null) {
    headers.addAll(header);
   }
   //option存放請求的一些配置信息
   if(option != null) {
    option.headers = headers;
   }else {
    //get請求
    option = new Options(method:'get');
    option.headers = headers;
   }
   //超時時間15000ms
   option.connectTimeout = 15000;
   //創建dio對象
   Dio dio = new Dio();
   Response response;
   try{
    //執行網絡請求，await和async配合使用，表示這是一個異步耗時操作
    //執行結果不會立馬返回。
    response = await dio.request(url,data: params,options: option);
   }on DioError catch(e) {
    //異常處理
    ....
    return new ResultData(Code.errorHandleFunction(errorResponse.statusCode, e.message, noTip), false, errorResponse.statusCode);
   }
   try{
     if(response.statusCode == 200 || response.statusCode == 201) {
      //網絡請求成功
      return await new ResultData(response.data, true, Code.SUCCESS,headers: response.headers);
     }
   }catch(e) {
    //異常處理
    print('返回參數' + e.toString() + url);
    return new ResultData(response.data, false, response.statusCode,headers: response.headers);
   }
   return new ResultData(Code.errorHandleFunction(response.statusCode, "", noTip), false, response.statusCode);
  }

這個是最底層類封裝了一個靜態的請求方法，直接調用dio的request方法進行網路請求，很簡單。

  //如果這個是耗時方法，就會用async標記，耗時操作用await標記，表示是一個異步操作。
  static getTodayFilmListDao() async {
   //獲取請求的url
   String url = Address.getTodayFilmList();
   //調用上面封裝的網絡請求方法進行網絡請求
   var res = await HttpManager.netFetch(url, null, null, null);
   if(res != null && res.result) {
    var data = res.data;
    if(data == null || data.length == 0) {
     return await new DataResult([],true);
    }
    //網絡請求成功，進行數據解析
    var response = TodayFilmResponse.fromJson(data);
    //返回數據
    return await new DataResult(response.result,true);
   }else {
    return await new DataResult(null,false);
   }
  }

獲取url方法很簡單，就是字符串拼接了一下

 static getTodayFilmList() {
   return "${host}movie/movies.today?cityid=1&dtype=&key=713a408e855352d913806ef1e3ce3c33";
  }

下面分析一下json數據解析過程。

如上所說，json解析使用的是json_serializable package包。它是一個自動化源代碼生成器，可以為我們生成JSON序列化模板。

網絡請求獲取到的json數據是這樣的

{
        "movieId":"135808",
        "movieName":"新喜劇之王",
        "pic_url":"http:\/\/img5.mtime.cn\/mt\/2019\/02\/02\/113216.53857992_182X243X4.jpg"
      },
  
TodayFilmBean類

    //TodayFilmBean.g.dart將在我們運行生成命令之后自動生成
    part 'TodayFilmBean.g.dart';
    
    //這個標注是告訴生成器，這個類是要生成的Model類
    @JsonSerializable()
    class TodayFilmBean{
     String movieId;
     String movieName;
     String pic_url;
     
      //構造函數
     TodayFilmBean(this.movieId,this.movieName,this.pic_url);
     
     //json轉換為bean對象
     factory TodayFilmBean.fromJson(Map<String,dynamic> json) => _$todayFilmBeanFromJson(json);
     
     //bean對象轉換為json
     Map<String,dynamic> toJson() => _$todayFilmBeanToJson(this);
    }
生成的TodayFilmBean.g.dart類是這樣的

    part of 'TodayFilmBean.dart';
    
    //json轉換為bean對象
    TodayFilmBean _$todayFilmBeanFromJson(Map<String,dynamic> json) {
     return TodayFilmBean(json['movieId'] as String,json['movieName'] as String,
       json['pic_url'] as String);
    }
    
    //bean對象轉換為json
    Map<String,dynamic> _$todayFilmBeanToJson(TodayFilmBean instance) =>
      <String,dynamic> {
       'movieId': instance.movieId,
       'movieName': instance.movieName,
       'pic_url':instance.pic_url
    };

有兩種運行代碼生成器的方法：

1.一次性生成

通過在我們的項目根目錄下運行flutter packages pub run build_runner build,我們可以在需要時為我們的model生成json序列化代碼。這觸發了一次性構建，它通過我們的源文件，挑選相關的并為它們生成必要的序列化代碼。

雖然這非常方便，但如果我們不需要每次在model類中進行更改時都要手動運行構建命令的話會更好。

2.持續生成

使用_watcher_可以使我們的源代碼生成的過程更加方便。它會監視我們項目中文件的變化，并且在需要時自動構建必要的文件。我們可以通過flutter packages pub run build_runner watch 在項目根目錄下運行來啟動_watcher_。

只需啟動一次觀察器，然后并讓它在后臺運行，這是安全的。

執行序列化只需執行

//把json數據轉化為了bean對象
var filmBean = TodayFilmBean.fromJson(json);

使用GridView最終展示結果

  DataResult dataResult;
  List<TodayFilmBean> mData = [];
  
  //當StatefulWiget被嵌入此view樹中，就會為此widget創建State對象
  //當State對象被創建了，frameWork就會調用initState()方法
  @override
  void initState() {
   //初始化數據
   getTodayFilm();
   super.initState();
  }
  
  
  void getTodayFilm() async {
   //這是一個異步操作，結果返回有一定延遲
   dataResult = await TodayDao.getTodayFilmListDao();
   //調用setState方法會通知framework控件狀態有變化，它會立馬觸發
   //State的build方法更新widget狀態
   setState(() {
    mData = dataResult.data;
   });
  }

上面是初始化網絡請求，在請求到數據后，調用setState刷新UI

   //State的build方法，調用setState方法后，此方法就會被觸發
   //用來刷新UI
   @override
   Widget build(BuildContext context) {
  
    return Scaffold(
     appBar: AppBar(
  
      title: Text(widget.title),
     ),
     
     //如果mData.length == 0,展示一個loading框，否則展示數據
     body: mData.length == 0
       ? new Center(child: new CircularProgressIndicator()):
       //創建GridView對象
       new GridView.builder(
  
       gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
         crossAxisCount: 3, //每行2個
         mainAxisSpacing: 1.0, //主軸(豎直)方向間距
         crossAxisSpacing: 1.0, //縱軸(水平)方向間距
         childAspectRatio: 0.7 //縱軸縮放比例
       ),
       //item數量
       itemCount:mData.length,

       //創建每個item
       itemBuilder: (BuildContext context,int index) {
        return _getWidget(index);
       }),
    );
   }

 _getWidget(int index) {
  //添加要展示的item內容
   return new Column(
    children: <Widget>[
     new Expanded(child: new CardItem(color: Colors.black12,child: _getChild(index)),flex: 8,),
     //顯示網絡請求文本
     new Expanded(child: new Text(mData[index].movieName,
      textAlign: TextAlign.end,
      maxLines: 1,
     ),
       flex:1)
    ]);
 }

 _getChild(int i) {
  return new Padding(padding: new EdgeInsets.all(1.0),
    //顯示網絡請求的圖片
    child: new Image(image: NetworkImage(mData[i].pic_url)));
 }

一個自定義的CardItem

class CardItem extends StatelessWidget{
 final Widget child;
 final EdgeInsets margin;
 final Color color;
 final RoundedRectangleBorder shape;
 final double elevation;

 CardItem({@required this.color,this.child,this.elevation = 5.0,this.shape,this.margin});

 @override
 Widget build(BuildContext context) {
  EdgeInsets margin = this.margin;
  RoundedRectangleBorder shape = this.shape;
  Color color = this.color;
  margin ??= EdgeInsets.only(left: 2.0,top: 2.0,right: 2.0,bottom: 2.0);
  shape ??= new RoundedRectangleBorder(borderRadius: new BorderRadius.all(Radius.circular(4.0)));
  color ??= new Color(0xffeeff);
  return new Card(elevation: elevation,shape: shape,color: color,margin: margin,child: child,);
 }
}

上述就是小編為大家分享的使用Flutter怎么實現一個網絡請求了，如果剛好有類似的疑惑，不妨參照上述分析進行理解。如果想知道更多相關知識，歡迎關注億速云行業資訊頻道。