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);
});
}
@override
Widget 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);
});