Flutter網路請求Dio庫的使用及封裝詳解

2022-04-14 13:00:11

一、專案目錄結構

資料夾	功能
components	放置全域性共用元件
router	全域性路由管理
service	管理介面請求並對返回資料進行處理，複雜功能邏輯處理
store	provider全域性狀態管理
utile	工具類，例如：介面請求工具類，資料持久化工具類，加密解密工具類……
views	介面管理，實現介面UI繪製的程式碼邏輯

二、封裝思路：

1、在DioRequest工具類中統一初始化網路請求常見設定，實現請求攔截器、響應攔截器以及錯誤處理。

2、統一在service中管理介面請求，並且對返回的資料根據實際需求進行處理，如果資料的修改需要更新UI或者需要全域性共用該資料，可以結合provider實現。

三、新增依賴

在pubspec.yaml檔案中新增所需要的第三方依賴庫

dev_dependencies:
  flutter_test:
    sdk: flutter 
  # The "flutter_lints" package below contains a set of recommended lints to
  # encourage good coding practices. The lint set provided by the package is
  # activated in the `analysis_options.yaml` file located at the root of your
  # package. See that file for information about deactivating specific lint
  # rules and activating additional ones.
  flutter_lints: ^1.0.0
  # 資料請求
  dio: ^4.0.4

四、簡單實現網路請求

在utils目錄中新建dio_request.dart檔案實現DioRequest網路請求的工具類。

import 'package:dio/dio.dart';
/// dio網路請求設定表 自定義
class DioConfig {
  static const baseURL = 'http://117.34.71.31:8081/paas-admin'; //域名
  static const timeout = 10000; //超時時間
} 
// 網路請求工具類
class DioRequest {
  late Dio dio;
  static DioRequest? _instance;
  /// 建構函式
  DioRequest() {
    dio = Dio();
    dio.options = BaseOptions(
        baseUrl: DioConfig.baseURL,
        connectTimeout: DioConfig.timeout,
        sendTimeout: DioConfig.timeout,
        receiveTimeout: DioConfig.timeout,
        contentType: 'application/json; charset=utf-8',
        headers: {});
    /// 請求攔截器 and 響應攔截機 and 錯誤處理
    dio.interceptors.add(InterceptorsWrapper(onRequest: (options, handler) {
      print("n================== 請求資料 ==========================");
      print("url = ${options.uri.toString()}");
      print("headers = ${options.headers}");
      print("params = ${options.data}");
      return handler.next(options);
    }, onResponse: (response, handler) {
      print("n================== 響應資料 ==========================");
      print("code = ${response.statusCode}");
      print("data = ${response.data}");
      print("n");
      handler.next(response);
    }, onError: (DioError e, handler) {
      print("n================== 錯誤響應資料 ======================");
      print("type = ${e.type}");
      print("message = ${e.message}");
      print("n");
      return handler.next(e);
    }));
  }
  static DioRequest getInstance() {
    return _instance ??= DioRequest();
  }
}

五、實現登入註冊服務

在lib下新建service目錄，並在service目錄中新建login.dart檔案。

import 'dart:convert';

import 'package:cyber_security/utils/http.dart';

class LoginService {
  /// 獲取使用者資料中心列表
  static Future<List> getDataCenter() async {
    var response = await DioRequest.getInstance().dio.get('/getDataCenter');
    var data = jsonDecode(response.toString());
    return data['dataCenterList'];
  }

  /// 登入介面
  static login(value) async {
    var response = await DioRequest.getInstance()
        .dio
        .post('/sys/login', queryParameters: value);
    var data = jsonDecode(response.toString()); 
    /// 對返回的身份憑證全域性持久化儲存
    return data['key'];
  }

  /// 獲取許可權列表
  static menuNav() async {
    var response = await DioRequest.getInstance().dio.get('/sys/menu/nav');
    var data = jsonDecode(response.toString());
    return data['key'];
  }
}

六、使用service服務

@override
  void initState() {
    // TODO: implement initState
    super.initState();
    /// 請求使用者資料中心資料
    LoginService.getDataCenter().then((value) {
      setState(() {
        _dataCenterList = value;
      });
    });
  }

到此這篇關於Flutter網路請求Dio庫的使用及封裝詳解的文章就介紹到這了,更多相關Flutter Dio庫內容請搜尋it145.com以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援it145.com！