Flutter 網路請求框架封裝

蘆葦科技App技術團隊發表於2019-03-30

Flutter 請求網路的三種方式

flutter 請求網路的方式有三種，分別是 Dart 原生的網路請求 HttpClient、第三方網路請求 http以及 Flutter 中的 Dio。我們可以比較一下這三種網路請求方式，然後封裝為我們方便請求網路的工具類。

Dart 原生的網路請求 HttpClient

實現 Dart 獲取網路資料的請求，一般我們需要以下幾個步驟：

step 1：原生的網路請求時不需要修改 pubspec.yaml 檔案的，我們只需要在使用的地方引入所需包就可以了

import 'dart:convert';
import 'dart:io';
複製程式碼

step 2：建立一個HttpClient

HttpClient httpClient = new HttpClient();
複製程式碼

step 3: 開啟Http連線，設定請求頭

HttpClientRequest request = await httpClient.getUrl(uri);
複製程式碼

在這一步中，我們可以設定人意的的請求方法，比如 Get 請求、Post 請求、Delete 請求。

例如：攜帶引數的請求

Uri uri=Uri(scheme: "https", host: "flutterchina.club", queryParameters: {
    "userName":"chen",
    "password":"123456"
  });
複製程式碼

例如：設定請求的 header

request.headers.add("user-agent", "test");
request.headers.add("Authorization", "LKSJDLFJSDLKJSLKklsdj");
複製程式碼

step 4: 等待連線伺服器

HttpClientResponse response = await request.close();
複製程式碼

step 5: 讀取響應內容

if (response.statusCode == HttpStatus.ok) {
      _content = await response.transform(Utf8Decoder()).join();
}
複製程式碼

step 6: 斷開連線

httpClient.close();
複製程式碼

以上的步驟是 dart 簡單獲取網路的方式，我們從上面可以看到，通過 HttpClient 發起網路請求時比較麻煩的，很多都要我們親手處理，還有 Cookie 的管理也是比較麻煩的。

庫 http

step 1：pubspec.yaml 新增依賴

http: '>=0.11.3+12'
複製程式碼

step 2: 在使用的地方導包

import 'package:http/http.dart' as http;
複製程式碼

step 3：發起請求

Get 請求

void getRequest() async {
    var client = http.Client();
    http.Response response = await client.get(url_2);
    _content = response.body;
  }
複製程式碼

Post 請求

  void postRequest() async {
    var params = Map<String, String>();
    params["username"] = "hellonews";
    params["password"] = "123456";

    var client = http.Client();
    var response = await client.post(url_post, body: params);
    _content = response.body;
  }
複製程式碼

相對比 Dart 原生的網路請求，第三方庫 http 的網路請求方式是要方便好多，寫起來也是挺爽的。

Flutter 釋出的 dio

Dio 一個強大的 Dart Http 請求庫，支援 Restful API、FormData、攔截器、請求取消、Cookie管理、檔案上傳/下載、超時等...

step 1：pubspec.yaml 新增依賴

dependencies:
  dio: ^1.0.9
複製程式碼

step 2：匯入引用包

import 'package:dio/dio.dart';
複製程式碼

step 3：發起網路請求

Get 請求

void getRequest() async {
    Dio dio = new Dio();
    var response = await dio.get("/test?id=12&name=chen");
    _content = response.data.toString();
  }
複製程式碼

對於 query 引數，我們可以通過物件來進行傳遞，上面的程式碼等同於：

void getRequest() async {
    Dio dio = new Dio();
    var response = await dio.get("/test"，data:{"id":12,"name":"chen"});
    _content = response.data.toString();
  }
複製程式碼

Post 請求

  void postRequest() async {
    var dio = new Dio();
    var response = await dio.post(url_post, data:{"id":12,"name":"wendu"});
    _content = response.data.toString();
  }
複製程式碼

Dio 網路請求框架封裝

日誌資訊攔截

Dio 和 okhttp 一樣，都會有一個請求攔截器和響應攔截器，通過攔截器，我們可以在請求之前或響應之後做一些同意的預處理。例如我們發起請求前檢視我們請求的引數和頭部，響應的時候，我們可以檢視返回來的資料。

    Dio dio = new Dio();
    // 新增攔截器
    if (Config.DEBUG) {
      dio.interceptors.add(InterceptorsWrapper(
          onRequest: (RequestOptions options){
            print("\n================== 請求資料 ==========================");
            print("url = ${options.uri.toString()}");
            print("headers = ${options.headers}");
            print("params = ${options.data}");
          },
          onResponse: (Response response){
            print("\n================== 響應資料 ==========================");
            print("code = ${response.statusCode}");
            print("data = ${response.data}");
            print("\n");
          },
          onError: (DioError e){
            print("\n================== 錯誤響應資料 ======================");
            print("type = ${e.type}");
            print("message = ${e.message}");
            print("stackTrace = ${e.stackTrace}");
            print("\n");
          }
      ));
    }
複製程式碼

如果我們想要移除攔截器，那麼我們可以將其設定為 null

dio.interceptor.request.onSend=null;
dio.interceptor.response.onSuccess=null;
dio.interceptor.response.onError=null;
複製程式碼

token 新增

    //  頭部新增 token 驗證
    headers["Authorization"] = "token lskjdlklsjkdklsjd333";
    option.headers = headers;
    ///超時
    option.connectTimeout = 15000;
    try {
      Response response = await dio.request(url, data: params, options: option);
    } on DioError catch (e) {
      // 請求錯誤處理
    }
複製程式碼

自動生成 dart 的 json 實體類外掛 FlutterJsonBeanFactory

在 Android 開發中，有 GsonFormat 這個外掛來講 json 資料自動轉化成 Bean；那麼在 Flutter 中也有類似的外掛可以生產序列化的實體類的外掛：FlutterJsonBeanFactory

step 1：下載外掛 FlutterJsonBeanFactory，安裝完成後重啟

Setting -> Plugins -> Browse Respositories 中搜尋 FlutterJsonBeanFactory
複製程式碼

New -> dart bean class File from JSON
複製程式碼

step 3：輸入實體類名及 json 格式的資料
step 4：最後生成的實體類：LoginEntity

class LoginEntity {
	String easemobpassword;
	String username;

	LoginEntity({this.easemobpassword, this.username});

	LoginEntity.fromJson(Map<String, dynamic> json) {
		easemobpassword = json['easemobPassword'];
		username = json['username'];
	}

	Map<String, dynamic> toJson() {
		final Map<String, dynamic> data = new Map<String, dynamic>();
		data['easemobPassword'] = this.easemobpassword;
		data['username'] = this.username;
		return data;
	}
}
複製程式碼

請求錯誤處理

    Response response;
    try {
      response = await dio.request(url, data: params, options: option);
    } on DioError catch (e) {
      // 請求錯誤處理
      Response errorResponse;
      if (e.response != null) {
        errorResponse = e.response;
      } else {
        errorResponse = new Response(statusCode: 666);
      }
      if (e.type == DioErrorType.CONNECT_TIMEOUT) {
        errorResponse.statusCode = Code.NETWORK_TIMEOUT;
      }
      if (Config.DEBUG) {
        print('請求異常: ' + e.toString());
        print('請求異常 url: ' + url);
      }
      return new ResultData(Code.errorHandleFunction(errorResponse.statusCode, e.message, noTip), false, errorResponse.statusCode);
    }
複製程式碼

其中 ResultData 是網路結果處理的實體類

/**
 * 網路結果資料
 * Created by chenjianrun
 * Date: 2018-07-16
 */
class ResultData {
  var data;
  bool result;
  int code;
  var headers;

  ResultData(this.data, this.result, this.code, {this.headers});
}

複製程式碼

Code 是處理網路錯誤的編碼，並將錯誤結果通過 eventbus 傳送出去，一般我們可以在 main_pager 中註冊監聽這個事件。

///網路請求錯誤編碼
class Code {
  ///網路錯誤
  static const NETWORK_ERROR = -1;

  ///網路超時
  static const NETWORK_TIMEOUT = -2;

  ///網路返回資料格式化一次
  static const NETWORK_JSON_EXCEPTION = -3;

  static const SUCCESS = 200;

  static final EventBus eventBus = new EventBus();

  static errorHandleFunction(code, message, noTip) {
    if(noTip) {
      return message;
    }
    eventBus.fire(new HttpErrorEvent(code, message));
    return message;
  }
}
複製程式碼

完成的網路請求類：HttpRequest

import 'dart:io';

import 'package:dio/dio.dart';
import 'package:private_tutor/common/SpUtils.dart';
import 'package:connectivity/connectivity.dart';

import 'dart:collection';

import 'package:private_tutor/common/config/Config.dart';
import 'package:private_tutor/net/ResultCode.dart';
import 'package:private_tutor/net/ResultData.dart';

///http請求管理類，可單獨抽取出來
class HttpRequest {
  static String _baseUrl;
  static const CONTENT_TYPE_JSON = "application/json";
  static const CONTENT_TYPE_FORM = "application/x-www-form-urlencoded";
  static Map optionParams = {
    "timeoutMs": 15000,
    "token": null,
    "authorizationCode": null,
  };

  static setBaseUrl(String baseUrl){
    _baseUrl = baseUrl;
  }

  static get(url,param) async{
    return await request(_baseUrl+url, param, null, new Options(method:"GET"));
  }

  static post(url,param) async{
    return await request(_baseUrl+url, param, {"Accept": 'application/vnd.github.VERSION.full+json'}, new Options(method: 'POST'));
  }

  static delete(url,param) async{
    return await request(_baseUrl+url, param, null, new Options(method: 'DELETE'));
  }

  static put(url,param) async{
    return await request(_baseUrl+url, param, null, new Options(method: "PUT", contentType: ContentType.text));
  }

  ///發起網路請求
  ///[ url] 請求url
  ///[ params] 請求引數
  ///[ header] 外加頭
  ///[ option] 配置
  static request(url, params, Map<String, String> header, Options option, {noTip = false}) async {

    //沒有網路
    var connectivityResult = await (new Connectivity().checkConnectivity());
    if (connectivityResult == ConnectivityResult.none) {
      return new ResultData(Code.errorHandleFunction(Code.NETWORK_ERROR, "", noTip), false, Code.NETWORK_ERROR);
    }

    Map<String, String> headers = new HashMap();
    if (header != null) {
      headers.addAll(header);
    }

    //授權碼
    if (optionParams["authorizationCode"] == null) {
      var authorizationCode = await getAuthorization();
      if (authorizationCode != null) {
        optionParams["authorizationCode"] = authorizationCode;
      }
    }

    headers["Authorization"] = optionParams["authorizationCode"];
    // 設定 baseUrl
    
    if (option != null) {
      option.headers = headers;
    } else{
      option = new Options(method: "get");
      option.headers = headers;
    }

    ///超時
    option.connectTimeout = 15000;

    Dio dio = new Dio();
    // 新增攔截器
    if (Config.DEBUG) {
      dio.interceptors.add(InterceptorsWrapper(
          onRequest: (RequestOptions options){
            print("\n================== 請求資料 ==========================");
            print("url = ${options.uri.toString()}");
            print("headers = ${options.headers}");
            print("params = ${options.data}");
          },
          onResponse: (Response response){
            print("\n================== 響應資料 ==========================");
            print("code = ${response.statusCode}");
            print("data = ${response.data}");
            print("\n");
          },
          onError: (DioError e){
            print("\n================== 錯誤響應資料 ======================");
            print("type = ${e.type}");
            print("message = ${e.message}");
            print("stackTrace = ${e.stackTrace}");
            print("\n");
          }
      ));
    }

    Response response;
    try {
      response = await dio.request(url, data: params, options: option);
    } on DioError catch (e) {
      // 請求錯誤處理
      Response errorResponse;
      if (e.response != null) {
        errorResponse = e.response;
      } else {
        errorResponse = new Response(statusCode: 666);
      }
      if (e.type == DioErrorType.CONNECT_TIMEOUT) {
        errorResponse.statusCode = Code.NETWORK_TIMEOUT;
      }
      if (Config.DEBUG) {
        print('請求異常: ' + e.toString());
        print('請求異常 url: ' + url);
      }
      return new ResultData(Code.errorHandleFunction(errorResponse.statusCode, e.message, noTip), false, errorResponse.statusCode);
    }

    try {
      if (option.contentType != null && option.contentType.primaryType == "text") {
        return new ResultData(response.data, true, Code.SUCCESS);
      } else {
        var responseJson = response.data;
        if (response.statusCode == 201 && responseJson["token"] != null) {
          optionParams["authorizationCode"] = 'token ' + responseJson["token"];
          await SpUtils.save(Config.TOKEN_KEY, optionParams["authorizationCode"]);
        }
      }
      if (response.statusCode == 200 || response.statusCode == 201) {
        return ResultData(response.data, true, Code.SUCCESS, headers: response.headers);
      }
    } catch (e) {
      print(e.toString() + url);
      return ResultData(response.data, false, response.statusCode, headers: response.headers);
    }
    return new ResultData(Code.errorHandleFunction(response.statusCode, "", noTip), false, response.statusCode);
  }

  ///清除授權
  static clearAuthorization() {
    optionParams["authorizationCode"] = null;
    SpUtils.remove(Config.TOKEN_KEY);
  }

  ///獲取授權token
  static getAuthorization() async {
    String token = await SpUtils.get(Config.TOKEN_KEY);
    if (token == null) {
      String basic = await SpUtils.get(Config.USER_BASIC_CODE);
      if (basic == null) {
        //提示輸入賬號密碼
      } else {
        //通過 basic 去獲取token，獲取到設定，返回token
        return "Basic $basic";
      }
    } else {
      optionParams["authorizationCode"] = token;
      return token;
    }
  }
}

複製程式碼

使用示例

/// 登入 model
class LoginModel{
    // 手機號碼登入
  static phoneLogin(String phone,String verifyCode) async{
    ResultData response = await HttpRequest.post(Address.phoneLogin, {"phoneNum" : phone,"captcha":verifyCode});
    if(response != null && response.result){
        PhoneLoginEntity phoneLoginEntity = PhoneLoginEntity.fromJson(json.decode(response.data));
        return new DataResult(phoneLoginEntity, true);
    }else{
      return new DataResult(null, false);
    }
  }

    // 獲取驗證碼
  static getVerifyCode(String phone) async{
    ResultData response = await HttpRequest.get("${Address.getVerifyCode}?phone=${phone}", null);

//    var response = await HttpRequest.get(Address.getVerifyCode, {"phone":phone});
    if(response != null && response.result){
      VerifyCodeEntity entity = VerifyCodeEntity.fromJson(response.data);
      return new DataResult(entity, true);
    }else{
      return new DataResult(null, false);
    }
  }
}
複製程式碼

作者介紹

陳堅潤：廣州蘆葦科技 APP 團隊 Android 開發工程師

內推資訊

我們正在招募小夥伴，有興趣的小夥伴可以把簡歷發到 app@talkmoney.cn，備註：來自掘金社群

詳情可以戳這裡--> 廣州蘆葦資訊科技

Flutter 網路請求 Dio 封裝
2021-09-01
Flutter封裝
Flutter 熱門網路請求框架Dio的簡單封裝
2021-03-03
Flutter框架封裝
flutter dio網路請求封裝實現
2020-09-12
Flutter封裝
OC：封裝網路請求
2019-01-24
封裝
小程式-網路請求封裝
2021-09-09
封裝
flutter網路請求框架dio基本使用
2020-03-04
Flutter框架
十. Axios網路請求封裝
2020-12-07
iOS封裝
13封裝網路請求類庫
2017-08-16
封裝
Retrofit + Kotlin + MVVM 的網路請求框架的封裝嘗試
2021-11-08
KotlinMVVM框架封裝
uni-app網路請求的封裝
2019-07-03
APP封裝
基於FutureBuilder通用網路請求介面封裝
2019-08-05
Rebuild封裝
Android網路請求(終) 網路請求框架Retrofit
2022-11-23
Android框架
Android網路請求(3) 網路請求框架OkHttp
2022-11-22
Android框架HTTP
一步步封裝實現自己的網路請求框架
2019-02-03
封裝框架
Android網路請求(4) 網路請求框架Volley
2022-11-23
Android框架
Retrofit+okhttp+Rxjava封裝網路請求工具類
2019-01-03
HTTPRxJava封裝
微信小程式之網路請求簡單封裝
2017-06-27
微信小程式封裝
Kotlin中Retrofit網路請求簡單封裝
2018-05-15
Kotlin封裝
Retrofit2/Rxkotlin網路請求的封裝
2017-12-19
Kotlin封裝
Android Http請求框架二：xUtils 框架網路請求
2015-05-04
AndroidHTTP框架
Flutter學習(7)——網路請求框架Dio簡單使用
2021-08-09
Flutter框架
網路請求框架對比
2016-03-08
框架
RxRetrofit-終極封裝-深入淺出&網路請求
2016-12-23
封裝
NUXT3.0實現網路請求二次封裝
2023-05-09
UX封裝
一步一步搭建Flutter開發架子-網路請求，非同步UI更新封裝
2021-03-02
Flutter非同步UI封裝
封裝axios請求
2018-12-15
封裝iOS
關於對小程式網路請求的封裝(詳盡版)
2020-05-18
封裝
Retrofit + RxJava ＋ OkHttp 讓網路請求變的簡單-封裝篇
2017-05-17
RxJavaHTTP封裝
使用GCD實現和封裝分組併發網路請求
2016-05-25
GC封裝
Flutter開發系列教程之網路請求
2019-07-31
Flutter
Flutter 高效自學筆記（三）——網路請求
2019-05-30
Flutter筆記
簡單6步搞定Flutter網路請求
2019-04-15
Flutter
MVVM框架的搭建（三）——網路請求
2018-10-10
MVVM框架
封裝ajax、axios請求
2019-01-23
封裝iOS
原生JS封裝AJAX請求
2017-12-14
JS封裝
LXNetwork – 基於AF3.0封裝的iOS網路請求庫
2016-09-07
封裝iOS
根據Coding的iOS端重新用RAC封裝網路請求
2015-10-03
iOS封裝
okhttp網路請求框架的簡單使用
2016-11-24
HTTP框架