18-Flutter移动电商实战-首页_火爆专区商品接口制作

1、获取接口的方法

在service/service_method.dart里制作方法。我们先不接收参数，先把接口调通。

Future getHomePageBeloConten() async{try{print('开始获取下拉列表数据.................');Response response;Dio dio = new Dio();dio.options.contentType=ContentType.parse("application/x-www-form-urlencoded");int page=1;response = await dio.post(servicePath['homePageBelowConten'],data:page);if(response.statusCode==200){return response.data;}else{throw Exception('后端接口出现异常，请检测代码和服务器情况.........');}}catch(e){return print('ERROR:======>${e}');}}

简单说一下 Future，在我们平时开发中我们是这样用的，首先给我们的函数后面加上 async 关键字，表示异步操作，然后函数返回值写成 Future，然后我们可以 new 一个 Future，逻辑前面加上一个 await关键字，然后可以使用future.then 等操作。

2、进行调试接口

接口对接的方法写好了，然后我们进行测试一下接口是否可以读出数据，如果能读出数据，就说明接口已经调通，我们就可以搞事情了。

因为这个新的类是由下拉刷新的，也就是动态的类，所以需要使用StatefulWidget。

代码如下：

class HotGoods extends StatefulWidget {_HotGoodsState createState() => _HotGoodsState();
}class _HotGoodsState extends State<HotGoods> {void initState() { super.initState();getHomePageBeloConten().then((val){print(val);});}@overrideWidget build(BuildContext context) {return Container(child:Text('1111'),);}
}

3、精简代码，来个通用接口

在写service_method.dart的时候，你会发现我们大部分的代码都是相同的，甚至复制一个方法后，通过简单的修改几个地方，就可以使用了。那就说明这个地方由优化的必要。让代码更通用更精简。

精简代码如下：

Future request(url,formData)async{try{print('开始获取数据...............');Response response;Dio dio = new Dio();dio.options.contentType=ContentType.parse("application/x-www-form-urlencoded");if(formData==null){response = await dio.post(servicePath[url]);}else{response = await dio.post(servicePath[url],data:formData);}if(response.statusCode==200){return response.data;}else{throw Exception('后端接口出现异常，请检测代码和服务器情况.........');}}catch(e){return print('ERROR:======>${e}');}}

使用也是非常简单的，只要传递一个接口名称和相对参数就可以了。

request('homePageBelowConten',1).then((val){print(val);
});

18-Flutter移动电商实战-首页_火爆专区商品接口制作相关推荐

11-Flutter移动电商实战-首页_屏幕适配方案和制作
11-Flutter移动电商实战-首页_屏幕适配方案和制作 1.flutter_ScreenUtil插件简介 flutter_ScreenUtil屏幕适配方案,让你的UI在不同尺寸的屏幕上都能显示合理 ...
17-Flutter移动电商实战-首页_楼层区域的编写
1.楼层标题组件该组件非常简单,只接收一个图片地址,然后显示即可: class FloorTitle extends StatelessWidget {final String picture_ad ...
12-Flutter移动电商实战-首页导航区域编写
12-Flutter移动电商实战-首页导航区域编写 1.导航单元素的编写从外部看,导航是一个GridView部件,但是每一个导航又是一个上下关系的Column.小伙伴们都知道Flutter有多层嵌套 ...
微信小程序电商实战-首页（上）
IT实战联盟博客:http://blog.100boot.cn 上一篇:微信小程序电商实战-入门篇嗨,大家好!经过近两周的精心准备终于开始微信小程序电商实战之路喽.那么最终会做成什么样呢?当然可以肯 ...
API电商平台“淘宝店铺所有商品接口”调用示例
API电商平台"淘宝店铺所有商品接口"调用示例以下是行业内了解到的一些情况,本帖只展示部分代码,需要更多API调试请移步注册API账号登录 - 跨境电商平台接口提供商数据采集公 ...
电商平台1688按关键词搜索商品接口调用展示
以下是行业内了解到的一些情况,本帖只展示部分代码,需要更多API调试请移步注册API账号登录 - 跨境电商平台接口提供商数据采集公司数据接口定制服务企业级数据服务商 { "i ...
电商平台按关键词搜索天猫商品接口调用展示
以下是行业内了解到的一些情况,本帖只展示部分代码,需要更多API调试请移步注册API账号登录 - 跨境电商平台接口提供商数据采集公司数据接口定制服务企业级数据服务商 { "p ...
Flutter移动电商实战 --（14）首页_拨打电话操作
拨打电话的功能在app里也很常见,比如一般的外卖app都会有这个才做.其实Flutter本身是没给我们提供拨打电话的能力的,那我们如何来拨打电话那? 1.编写店长电话模块这个小伙伴们一定轻车熟路了, ...
01-Flutter移动电商实战-项目学习记录
01-Flutter移动电商实战-项目学习记录一直想系统性的学习一下 Flutter,正好看到该课程<Flutter移动电商实战>的百度云资源,共 69 课时,由于怕自己坚持不下去(经常 ...

18-Flutter移动电商实战-首页_火爆专区商品接口制作

18-Flutter移动电商实战-首页_火爆专区商品接口制作相关推荐

最新文章

热门文章