Flutter网络请求Dio库的使用及封装详解

 更新时间:2022年04月14日 11:34:51   作者:WEB前端李志杰  
本文主要介绍了Flutter网络请求Dio库的使用及封装详解,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

Dart语言内置的HttpClient实现了基本的网络请求相关的操作。但HttpClient本身功能较弱,很多网络请求常用功能都不支持,因此在实际项目中,我们更多是使用dio库实现网络请求。

注:Flutter官网同样推荐在项目中使用Dio库。

Dio文档地址: pub.dev地址:dio | Dart Package

一、项目目录结构

在这里插入图片描述

文件夹功能
components放置全局共用组件
router全局路由管理
service管理接口请求并对返回数据进行处理,复杂功能逻辑处理
storeprovider全局状态管理
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库内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Win10下android studio开发环境配置图文教程

    Win10下android studio开发环境配置图文教程

    这篇文章主要为大家详细介绍了Win10下android studio开发环境配置图文教程,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2018-07-07
  • Android使用DatePickerDialog显示时间

    Android使用DatePickerDialog显示时间

    本文将结合实例代码,介绍Android使用DatePickerDialog显示时间,文中通过示例代码介绍的非常详细,需要的朋友们下面随着小编来一起学习学习吧
    2021-07-07
  • SurfaceView开发[捉小猪]手机游戏 (二)

    SurfaceView开发[捉小猪]手机游戏 (二)

    这篇文章主要介绍了用SurfaceView开发[捉小猪]手机游戏 (二)本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-08-08
  • 浅谈Android Studio导出javadoc文档操作及问题的解决

    浅谈Android Studio导出javadoc文档操作及问题的解决

    这篇文章主要介绍了浅谈Android Studio导出javadoc文档操作及问题的解决,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-03-03
  • Android Jetpack组件中LiveData的优劣

    Android Jetpack组件中LiveData的优劣

    LiveData是Jetpack组件的一部分,更多的时候是搭配ViewModel来使用,相对于Observable,LiveData的最大优势是其具有生命感知的,换句话说,LiveData可以保证只有在组件( Activity、Fragment、Service)处于活动生命周期状态的时候才会更新数据
    2023-04-04
  • android编程实现电话录音的方法

    android编程实现电话录音的方法

    这篇文章主要介绍了android编程实现电话录音的方法,涉及Android监听电话通话及音频采集的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • Android实现联动下拉框二级地市联动下拉框功能

    Android实现联动下拉框二级地市联动下拉框功能

    这篇文章主要介绍了Android实现联动下拉框二级地市联动下拉框功能,本文给大家分享思路步骤,给大家介绍的非常详细,具有一定的参考借鉴价值,需要的朋友可以参考下
    2018-12-12
  • Android 调用百度地图API示例

    Android 调用百度地图API示例

    在Android开发中有一个非常重要的应用就是实时定位,通过手机在手机地图上进行实时定位,定位当前手机的位置,这篇文章主要介绍了Android 调用百度地图API示例,有兴趣的可以了解一下。
    2017-01-01
  • Android实现检测实体按键事件并屏蔽

    Android实现检测实体按键事件并屏蔽

    这篇文章主要介绍了Android实现检测实体按键事件并屏蔽 ,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-08-08
  • WebView的几个常见功能使用方法

    WebView的几个常见功能使用方法

    本篇文章介绍了WebView的几个常见功能,WebView的功能很强大,感兴趣的小伙伴们可以了解一下。
    2016-11-11

最新评论