05-Flutter移動電商實戰-dio基礎_引入和簡單的Get請求

這篇開始我們學習Dart第三方Http請求庫dio，這是國人開源的一個項目，也是國內用的最廣泛的Dart Http請求庫。

1、dio介紹和引入

dio是一個強大的Dart Http請求庫，支持Restful API、 FormData、攔截器、請求取消、Cookie管理、文件上傳/下載、超時和自定義適配器等。

我相信很多人都已經接觸或者了解dio了，但是還是需要把它拿出來單獨講解一下，因為在Flutter編程工作中，每天都需要和它打交道，本套教程也會大量的使用dio庫來進行接口的調用和數據交換。

2、添加dio依賴

其實Flutter或者說Dart也為我們提供了第三方包管理工具，就和前端經常使用的npm包管理類似。

Dart的包管理文件叫做pubspec.yaml，其實它統管整個項目，操作最多的就是第三方插件和靜態文件（文件在項目根目錄下）,如果我們要引入第三方包需要在dependencies里寫明。例如我們要加入dio,代碼如下：

dependencies:dio:?^2.0.7

在 pubspec.yaml 里添加 dio 依賴后，點擊該文件的右上角：

下載成功后，在 Messages 里會顯示：

需要注意的是： 現在dio的版本已經是2.x版本，所以不要在使用1.x版本，可能是我使用的比較早，以前使用的是1.x版本，在項目原始PC上是可以運行的，但是移動到其它PC上就不能傳遞參數了。這個問題當時找了兩天時間，算是一個坑。也就是說它升級了2.x版本后1.x版本不管用了，不能攜帶參數。（也希望作者在升級版本時要考慮老版本的穩定性）

3、dio發送get請求

了解dio后，我們就先上手一個最簡單小Demo，練一下手。

案例是這樣的，我們模擬去大保健（啥是大保健，別裝單純了，這也是個成人課好嗎？），這時候媽媽就是我們的接口，我們需要告訴媽媽我們需要什么樣的人為我們服務，然后什么樣人就來到房間。用程序來解釋，就是我們發送一個get請求，服務端得到請求后會根據我們發送的參數，給我一個返回一個我們需要的數據。

我在easyMock上作了一個超級簡單的數據，其實只是為了作這個小案例，所以不是那么復雜，EasyMock接口地址如下。

https://www.easy-mock.com/mock/5c60131a4bed3a6342711498/baixing/dabaojian

我們看一下請求該接口會返回啥：

當然你也可以自己寫一個這樣的接口。

有了這樣的接口后，你就可以在Flutter里訪問這個請求了。不過你需要在使用的文件最上方用import引入dio.dart文件才可以。

import?'package:dio/dio.dart';

然后寫一個基本get請求方法，我們暫時命名為getHttp(),方法中我們用了異步的方法，因為這樣會防止后面的程序堵塞，具體代碼如下:

void?getHttp()async{try{Response?response;var?data={'name':'技術胖'};response?=?await?Dio().get("https://www.easy-mock.com/mock/5c60131a4bed3a6342711498/baixing/dabaojian?name=大胸美女",//??queryParameters:data);return?print(response);}catch(e){return?print(e);}}

為了大家學習方便，我給出整個頁面的代碼，這樣更有助于大家學習，所有代碼如下：

import?'package:flutter/material.dart'; import?'package:dio/dio.dart';class?HomePage?extends?StatelessWidget?{@overrideWidget?build(BuildContext?context)?{getHttp();return?new?Scaffold(body:?Center(child:?Text("商城首頁"), //????????child:?Text("商城首頁"),),);}void?getHttp()?async{try{Response?response;var?data={'name':'技術胖'};response?=?await?Dio().get("https://www.easy-mock.com/mock/5c60131a4bed3a6342711498/baixing/dabaojian?name=大胸美女",);return?print(response);}catch(e){return?print(e);}}}

啟動一下項目，控制臺打印信息如下：

目前我們還只能顯示在終端里，這太反人類了，下節課我們就來終止這個，讓界面和我們進行同步。

4、總結

本節課學會的知識點：

• 認識Dio庫：dio是一個dart的 http請求通用庫，目前也是大陸使用最廣泛的庫，國人開發，完全開源。
• flutter的插件包管理：學了引入dio包，并簡單的學習了pubspec.yaml的結構和編寫注意事項。
• get請求的編寫：我們以一個充滿正能量的小Demo講述了get請求的實現，并成功的返回了結果。

posted @ 2019-06-15 21:14 niceyoo 閱讀(...) 評論(...) 編輯 收藏

總結

以上是生活随笔為你收集整理的05-Flutter移动电商实战-dio基础_引入和简单的Get请求的全部內容，希望文章能夠幫你解決所遇到的問題。

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