Flutter 通過API獲取網路數據並解析

首先通過API獲取網路數據這個過程是耗時的，所以我們需要進行非同步操作，使用Dart語言完成非同步可以參考如下的文章

https://www.jianshu.com/p/f2f7634b602c

1.網路請求

直接進入正題，首先我進行網路請求是通過一個工具類，大家可以直接使用

import "package:http/http.dart" as http;

import "dart:convert";

class NetUtils {

static void get(String url, Function callback, {Map<String, String> params, Function errorCallback}) async {

if (params != null && params.isNotEmpty) {

StringBuffer sb = new StringBuffer("?");

params.forEach((key, value) {

sb.write("$key" + "=" + "$value" + "&");

});

String paramStr = sb.toString();

paramStr = paramStr.substring(0, paramStr.length - 1);

url += paramStr;

}

// print("$url");

try {

http.Response res = await http.get(url);

if (callback != null) {

callback(res.body);

}

} catch (exception) {

if (errorCallback != null) {

errorCallback(exception);

}

}

}

static void post(String url, Function callback, {Map<String, String> params, Function errorCallback}) async {

try {

http.Response res = await http.post(url, body: params);

if (callback != null) {

callback(res.body);

}

} catch (e) {

if (errorCallback != null) {

errorCallback(e);

}

}

}

}

我現在使用一下，這個data就是返回的Gson欄位

NetUtils.get(url, (data) {

}, errorCallback: (e) {

print("network error: $e");

});

2.解析Gson欄位

雖然獲取了Gson欄位，但是我們還不能獲取我們想要的數據，這樣和java一樣，需要解析Gson欄位，這個flutter有相關的API實現了，我們需要導一下包，雖然這個包在NetUtil導入過，但是flutter不能間接導包

import "dart:convert";

然後使用

NetUtils.get(url, (data) {

if (data != null) {

var obj = json.decode(data);

if (obj["error"] == false) {

//print(obj);

setState(() {

MyApp.text = obj["results"][0]["desc"];

if (MyApp.text==null){

MyApp.text=" ";

}

});

}

}

}, errorCallback: (e) {

print("network error: $e");

});

3.完整的例子

就是通過乾貨集中營的API獲取網路數據，將其中一個分享的標題顯示出來。

這裡要注意的是非交互型控制項StatelessWidget是不能刷新的，而網路數據獲取後需要刷新控制項顯示，所以我們需要自己自定義一個交互型控制項，這個可以參考如下文章

https://blog.csdn.net/z979451341/article/details/80817609

好了，大家看代碼

import "dart:async";

import "package:flutter/material.dart";

import "dart:convert";

import "NetUtils.dart";

import "AndroidBean.dart";

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {

static String text="Hello World";

@override

Widget build(BuildContext context) {

return MaterialApp(

title: "Welcome to Flutter",

home: Scaffold(

appBar: AppBar(

title: Text("Welcome to Flutter"),

),

body: Center(

child: ParentWidget(),

),

),

);

}

}

class ParentWidget extends StatefulWidget {

@override

_ParentWidgetState createState() => new _ParentWidgetState();

}

class _ParentWidgetState extends State<ParentWidget> {

bool _active = false;

@override

Widget build(BuildContext context) {

getNetData();

return new Container(

child: new Text(MyApp.text)

);

}

getNetData() async {

var url = "http://gank.io/api/data/Android/10/1";

NetUtils.get(url, (data) {

if (data != null) {

var obj = json.decode(data);

if (obj["error"] == false) {

//print(obj);

setState(() {

MyApp.text = obj["results"][0]["desc"];

if (MyApp.text==null){

MyApp.text=" ";

}

});

}

}

}, errorCallback: (e) {

print("network error: $e");

});

}

}

AndroidBean.dart

class AndroidBean{

String desc;

List<String> images;

String url;

String who;

static List androidData;

}

4.最後

我要做一個比較完整的app，敬請期待

喜歡這篇文章嗎？立刻分享出去讓更多人知道吧！