flutter 项目实战二网络请求

本项目借用逛丢网站的部分数据，仅作为 flutter 开发学习之用。逛丢官方网址：https://guangdiu.com/

flutter windows开发环境设置

flutter 项目实战一新建 flutter 项目

flutter 项目实战二网络请求

flutter 项目实战三 json数据解析以及Gson格式化flutter 项目实战二网络请求

flutter 项目实战四列表数据展示

flutter 项目实战五 item 点击跳转，webview加载

flutter 项目实战六 drawer侧边栏

flutter 项目实战七 bottomNavigationBar

flutter 项目实战八下拉刷新上拉加载

flutter 项目实战九小时风云榜

在 flutter 项目实战一新建 flutter 项目已经新建了一个项目，现在开始我们的项目搭建。

因为需要获取逛丢的数据，所以先测试构建网络请求数据。

flutter 提供了网络请求的插件 dio ，使用此插件可以获取我们需要网络数据。

打开项目中的 pubspec.yaml 文件，在 dependencies 下添加插件 dio: ^2.1.0 然后点击右上角的 packages get

等待插件加载完成，如果加载失败，重新点击右上角的 packages get 获取

修改原来项目中的代码

1、添加引用

import 'package:dio/dio.dart';

2、新增数据请求方法

void _getHttpData() {String url="https://guangdiu.com/api/getlist.php?markid=5685521";Dio().get(url).then((result){setState(() {content=result.data.toString();});});
}

运行后的界面，点击右下角的加号可获取到网站的数据。

flutter 使用 setState(() { content=result.data; }); 更新数据，并重新build界面将设置后的新数据加载到界面上，完成界面的刷新。

放上完整的修改的类的代码：

class _MyHomePageState extends State<MyHomePage> {String content="还未发起请求";@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: Text('$content',),),floatingActionButton: FloatingActionButton(onPressed: _getHttpData,tooltip: 'Increment',child: Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);}void _getHttpData() {String url="https://guangdiu.com/api/getlist.php?markid=5685521";Dio().get(url).then((result){setState(() {content=result.data.toString();});});}}

至此完成了网络数据请求的测试。

但是，如果每次都是直接写完整的网络请求地址，还是比较麻烦，尤其是当服务器地址变更的时候，会特别麻烦。所以我们需要对网络请求进行初步的封装来是我们引用时更加的便捷简单。而且网络请求是一个耗时操作，这样使用总归有些不规范。

放上完整的封装代码

class HttpUtil{static HttpUtil httpUtil;String baseUrl="https://guangdiu.com/api/";Dio dio;BaseOptions options;static HttpUtil getInstance(){if(httpUtil==null){httpUtil=HttpUtil();}return httpUtil;}HttpUtil(){options=BaseOptions(baseUrl:baseUrl,connectTimeout: 10000,receiveTimeout: 3000,headers: {});dio=Dio(options);}// ignore: avoid_init_to_nullFuture<Response> get(String url,{options,callBack,data}) async {print("--------  $url  --------");Response response;try{response=await dio.get(url,);print("--------   " + response.toString());return response;}on DioError catch(e){if(CancelToken.isCancel(e)){print("取消 "+e.message);}else{print(e);}return null;}}Future<Response>  post(String url,{options,callBack,data}) async {print("*********  $url  *************");Response response;try{response=await dio.post(url,data: data,cancelToken: callBack,options: options);return response;}on DioError catch(e){if(CancelToken.isCancel(e)){print("取消 "+e.message);}else{print(e);}return null;}}}

HttpUtil 中的 get方法只需要传递一个 url 即可，无需传递其他参数。

修改 class _MyHomePageState 的代码

class _MyHomePageState extends State<MyHomePage> {String content="还未发起请求";@overrideWidget build(BuildContext context) {return Scaffold(appBar: AppBar(title: Text(widget.title),),body: Center(child: Text('$content',),),floatingActionButton: FloatingActionButton(onPressed: _getHttpData,tooltip: 'Increment',child: Icon(Icons.add),), // This trailing comma makes auto-formatting nicer for build methods.);}void _getHttpData() async {String url="getlist.php";FormData formData=FormData();formData.add("markid", "5685521");Response resp=await HttpUtil().post(url,data: formData).then((result){setState(() {content=result.data.toString();});});}}

因为网络请求服务是一个耗时操作所以我们修改使用了 async 与 await . 因为flutter是基于Dart语言的，而dart语言是单线程的，http请求又是异步的，所以此处需要添加异步处理，当遇到耗时的延迟的计算或方法(async)时，将其放到延迟运算队列中(await)，防止其阻塞不需要耗时的运算，最后来执行这个耗时操作，防止用户界面出现卡顿的现象。

码云 git 下载