Flutter dio 3.2.2 簡單封裝思路（網絡層）

文章目錄

1. Http dio 庫（3.2.2）

Flutter 裏面提供了網絡請求的api ，不過直接使用起來會有點麻煩，於是有了很多第三方的網絡庫，dio 就是其中之一，也是相對比較成熟的庫。那爲什麼選 dio 呢？

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

而且使用簡單，不過我們在使用時候，還是需要簡單封裝，便於以後切換庫。也讓代碼更加清晰易用。

封裝的簡單目錄結構：

一個HttpHelper 工具類，CommonInterceptor 攔截器，HttpIOException 異常封裝

2. 單例

通過dart 自帶的 factory 工廠模式，進行單例設計。
調用是時，直接 HttpUtil httpUtil = HttpUtil() 即可。

_httpInstance 以及 _init都是對外不可見。（dart 裏面 _ 開頭爲內部方法、內部變量）

class HttpUtil {
  factory HttpUtil() => _httpInstance();
  static HttpUtil _instance;
  
  static HttpUtil _httpInstance() {
    if (_instance == null) {
      _instance = HttpUtil._init();
    }
    return _instance;
  }
}

3. 基礎網絡屬性設置

dio 中基礎的網絡設置，在BaseOptions 中進行設置.

這裏簡單設置了 contentType，連接超時時間，接收超時時間，以及host ( baseUrl 的設置 )。相對固定的一些基礎參數可以直接在新建的時候設置，一些動態的數據，可以通過攔截器的形式動態添加或設置。

設置好的參數給 new Dio 進行dio 創建。

  HttpUtil._init() {
    orgOption = BaseOptions(
        contentType: CONTENT_TYPE,
        connectTimeout: CONNECT_TIMEOUT,
        receiveTimeout: RECEIVE_TIMEOUT,
        baseUrl: HOST);
    _dio = new Dio(orgOption);
  }

BaseOptions的其他參數：

4. 攔截器設置

使用過攔截器方知攔截器的重要性，攔截器多網絡上的處理至關重要，可以接解決很多疑難需求。

攔截器是順序調用，最先添加的先調用，後添加的後調用。

dio 也提供了攔截器的設置。這裏簡單做一個封裝：

  //攔截器添加
  addInterceptor(Interceptor interceptor) {
    if (null != _dio) {
      _dio.interceptors.add(interceptor);
    }
  }

  addInterceptors(List<Interceptor> interceptorList) {
    if (null != _dio) {
      _dio.interceptors.addAll(interceptorList);
    }
  }

新建攔截器

dio本身也提供了兩個攔截器，一個是 LogInterceptor 專門預約打log ，便於調試使用
一個是CookieManager ，用戶處理 cookie的。

攔截器有三個方法可以實現攔截：、
1 . FutureOr onRequest(RequestOptions options) => options;
請求出去之前的處理

2 . FutureOr onResponse(Response response) => response;
請求結果回來的處理

3 . FutureOr onError(DioError err) => err;
請求發生異常時候的處理

這裏新建兩個攔截器：

通用的請求頭
網絡錯誤處理，做統一信息出來

CommonInterceptor.dart：

///可以按需要添加攔截器，實現一些通用的功能，例如統一的請求頭，統一的參數添加
///下面是例子

class CommonHeaderInterceptor extends Interceptor {
  @override
  FutureOr<dynamic> onRequest(RequestOptions options) {
    options.headers.addAll({
      "deviceId":"123444",
      "requestId":"ddfsgg"
    });
    return super.onRequest(options);
  }
}

class ErrorInterceptor extends Interceptor {
  @override
  FutureOr<dynamic> onError(DioError err) {
    print(err.type);//也可以區分類型，自定義message;
    if(null != err.response) {
      err.message = "網絡錯誤請稍後重試(" + err.response.statusCode.toString() + ")";
    } else if(null != err.request) {
      err.message = "網絡異常，請檢查網絡情況";
    }
    return super.onError(err);
  }
}

5. 異常封裝

dio 本來就封裝了 DioError ，不過相對來說，DioError比較複雜，也不一定適合所有的需求，故此，做一個簡單的封裝。在接收到 DioError 或者其他異常的時候，通過 Future.error 拋出，自定義的異常，定義拋出信息。

class HttpIOException implements Exception{

  int code;
  String message;
  HttpIOException(this.code,this.message);
}

6. 調用

對外的調用比價簡單，提供 get post 等api 外部調用，返回 Future ，進行函數式調用返回。

如何調用：

    httpUtil.post("getServerTimestamp", getRequestData())
        .then((resp) {
          //這裏可以做想要的轉換，也可以什麼都不做
           HomePageResp result = new HomePageResp.fromJson(resp);
           return result;
        });

最後直接來個完整的代碼

import 'package:dio/dio.dart';
import 'dart:io';
import 'dart:async';
import 'package:move_forever_app/core/http/HttpIOExcepiton.dart';
import 'dart:convert';


const String GET = "get";
const String POST = "post";

const String HOST = "https://your_host_url.com/";
const int CONNECT_TIMEOUT = 10000;
const int RECEIVE_TIMEOUT = 3000;
final ContentType CONTENT_TYPE = ContentType.json;

typedef ErrorCallback = void Function(int count, String msg);


class HttpUtil {
  factory HttpUtil() => _httpInstance();
  static HttpUtil _instance;
  Dio _dio;
  BaseOptions orgOption;

  static HttpUtil _httpInstance() {
    if (_instance == null) {
      _instance = HttpUtil._init();
    }
    return _instance;
  }

  HttpUtil._init() {
    orgOption = BaseOptions(
        contentType: CONTENT_TYPE,
        connectTimeout: CONNECT_TIMEOUT,
        receiveTimeout: RECEIVE_TIMEOUT,
        baseUrl: HOST);
    _dio = new Dio(orgOption);
  }

  //攔截器添加
  addInterceptor(Interceptor interceptor) {
    if (null != _dio) {
      _dio.interceptors.add(interceptor);
    }
  }

  addInterceptors(List<Interceptor> interceptorList) {
    if (null != _dio) {
      _dio.interceptors.addAll(interceptorList);
    }
  }

  //post
  Future<dynamic> post (String path,postData) {
    return request(path, POST, postData);
  }

  //get
  Future<dynamic> get (String path) {
    return request(path, GET, null);
  }

  Future<dynamic> request(String path, String mode, postData) async {
    try {
      switch (mode) {
        case GET:
          var getResponse = await _dio.get(path);
          return new Future<dynamic>((){
            return getResponse.data;
          });
        case POST:
          //做一層json 轉換
          var postResponse = await _dio.post<Map<String,dynamic>>(path, data: json.encode(postData));
          return new Future<dynamic>((){
            return postResponse.data;
          });
      }
    } on DioError catch (exception) {
      return new Future.error(new HttpIOException(exception.response.statusCode, exception.message));
    } catch (error) {
      return new Future.error(new HttpIOException(-2, error.toString()));
    }
    return new Future.error(new HttpIOException(-1, "not supported"));
  }
}

7. 總結

封裝比較簡單，這個也是dio本來就是一個比較完善的庫的原因。

但是裏面還有很多可以擴展的地方，攔截器可以按需要添加，異常封裝也可以按需進行，get post 只是最基本的請求方式，還可以對其他進行添加封裝。

Flutter dio 3.2.2 簡單封裝思路（網絡層）

文章目錄

1. Http dio 庫（3.2.2）

2. 單例

3. 基礎網絡屬性設置

4. 攔截器設置

5. 異常封裝

6. 調用

7. 總結

電子科技大學計算機科學與技術就讀體驗

Golang爬蟲代理接入的技術與實踐

OKhttp源碼學習（八）—— 攔截器_CallServerInterceptor

OKhttp源碼學習（四）—— 攔截器_RetryAndFollowUpInterceptor

OKhttp源碼學習（七）—— 攔截器_ConnectInterceptor

OKhttp源碼學習（五）—— 攔截器_BridgeInterceptor

OKhttp源碼學習（六）—— 攔截器_CacheInterceptor

https://yachay.unat.edu.pe/blog/index.php?comment_area=format_blog&comment_component=blog&comment_co

linux以太網驅動總結