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移动电商实战-首页_火爆专区商品接口制作的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。