flutter dio+rxdart

嬌嫩的黃瓜發表於2019-04-30
FlutterDart

線上flutter 介面請求基本架構（線上實際專案搭建 不多講直接上程式碼）

首先新增庫： pubspec.yaml 目錄下：

  dio: ^2.1.2 #dio 請求框架
  rxdart: ^0.21.0 #rx框架
複製程式碼

介面請求工具類：

class ApiDio {
  static ApiDio instance;
  static ApiService apiService;
  ApiDio(){
    var options = new BaseOptions(
        connectTimeout: 5000,
        receiveTimeout: 3000,
        baseUrl:TTicarConfig.baseUrl,// api 頭部例如 https://www.baidu.com
        contentType: new ContentType('application', 'x-www-form-urlencoded',
            charset: 'utf-8'));
    Dio dio = new Dio(options);
    dio.interceptors.add(AuthInterceptor());// 新增 token
    dio..interceptors.add(LogInterceptor(responseBody: true, requestBody: true)); //新增日誌
    apiService= new ApiService(dio);
  }

  static ApiService getInstance() {
    if (instance == null) {
      instance = new ApiDio();
    }
    return _getApiService();
  }
  static  ApiService _getApiService() {
    return apiService;
  }
}
/// AuthInterceptor
///
/// 新增header認證
class AuthInterceptor extends Interceptor {
  String PLATFORM = "android";//可根據程式碼進行判斷
  String CLIENT = "store";
  @override
  onRequest(RequestOptions options) async{
    Map<String, String> headers = new Map();
    headers["Accept-Charset"] = "utf-8";
    headers["Connection"] = "keep-alive";
    headers["Accept"] = "*/*";
    headers["x-version"] = TTicarConfig.VERSION_NAME;//自己更改配置
    headers["x-platform"] = PLATFORM;
    headers["x-client"] = CLIENT;
    headers["x-equCode"] = TTicarConfig.equCode;//自己更改配置
    headers["Authorization"] = TTicarConfig.TOKEN;//自己更改配置

    options.headers=headers;
    return super.onRequest(options);
  }

}
複製程式碼

設定請求型別（post get 可自己新增想要的型別）

class ApiService {
  ApiService(this.dio);
  Dio dio;
  //get請求結構
  Future _get(String url, {Map<String, dynamic> params}) async {
    var response = await dio.get(url, queryParameters: params);
    return response.data;
  }
  //post
  Future _post(String url, Map<String, dynamic> params) async {
    var response = await dio.post(url, data: params);
    return response.data;
  }

  Observable post(String url, Map<String, dynamic> params) =>
      Observable.fromFuture(_post(url, params)).asBroadcastStream();

  
  Observable get(String url, {Map<String, dynamic> params}) =>
      Observable.fromFuture(_get(url, params: params)).asBroadcastStream();

}
複製程式碼

設定請求介面的工具類 (這不可以精簡不需要或者通過註解的方式)

class TTicarWork {
  /*
  * 我的收藏商品列表
  * */
  Observable loadCollectGood(String pageNum, String pageSize) {
    Map<String, String> map = new Map();
    map["pageNum"] = pageNum;
    map["pageSize"] = pageSize;
    return ApiDio.getInstance().get("collection/good/list", params: map);
  }

}
複製程式碼

請求介面


  new TTicarWork().loadCollectGood(pageNum, "20").listen((request) {
      //介面請求成功 （request為map） 自己設定解析資料
      
    }, onError: (e) {//請求異常等
    
    });
複製程式碼

目前這個框架的缺陷 （如有更好的操作進行@我，我會逐漸修復）

1.沒有通過註解的方式進行請求資料
2.沒有自動解析資料
3.沒有對網路進行判斷（可以自行新增攔截器進行攔截判斷）

複製程式碼

相關文章