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

目录
  • 一、项目目录结构
  • 二、封装思路:
  • 三、添加依赖
  • 四、简单实现网络请求
  • 五、实现登录注册服务
  • 六、使用service服务

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

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

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

一、项目目录结构

文件夹 功能
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库内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • Flutter下Android Studio配置gradle的方法

    一.失败的经历:手动配置gradle 下载gradle包http://gradle.org/gradle-download/ Mac Finder->Applications/应用程序->Android Studio右键显示包内容.继续打开Contents文件夹,正常情况下会有一个gradle文件夹,将下载解压之后的文件复制到这个文件夹下.如果Contents文件夹下没有gradle文件夹,创建gradle文件夹,继续后面的操作 配置gradle环境路径 打开终端,打开系统环境配置文件vim

  • 详解flutter之网络请求dio,请求,拦截器简单示例

    flutter一直很火的网络请求插件dio 直接上代码,写成一个类,可以直接使用 包含请求的封装,拦截器的封装 import 'package:dio/dio.dart'; import 'dart:async'; import 'dart:io'; import './apidomain.dart'; import './httpHeaders.dart'; import 'package:shared_preferences/shared_preferences.dart'; class D

  • Flutter网络请求库DIO的基本使用

    1. 导入dio包 目前dio库的最新版本是3.0.1,同使用其他三方库一样,Flutter中使用dio库同样需要配置pubspec.yaml文件. dependencies: flutter: sdk: flutter dio: ^3.0.10 2. 导入并创建实例 dio包引入成功之后就可以创建dio实例了,一个实例可以发起多个请求,APP中如果只有一个数据源的情况下就可以考虑将dio实例创建成单例模式,这样可以节省系统资源,减少不必要的开销. //htpp.dart import 'pac

  • Flutter Dio二次封装的实现

    目录: DioManager:Dio辅助类NWMethod:请求方法,get.post等 NWApi:大家都知道 EntityFactory:json转换辅助工厂,把json转为T BaseEntity<T>:数据基类,返回的参数为 {"code": 0, "message": "", "data": {}} BaseListEntity<T>:数据基类2,返回的参数为 {"code"

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

    目录 一.项目目录结构 二.封装思路: 三.添加依赖 四.简单实现网络请求 五.实现登录注册服务 六.使用service服务 Dart语言内置的HttpClient实现了基本的网络请求相关的操作.但HttpClient本身功能较弱,很多网络请求常用功能都不支持,因此在实际项目中,我们更多是使用dio库实现网络请求. 注:Flutter官网同样推荐在项目中使用Dio库. Dio文档地址: pub.dev地址:dio | Dart Package 一.项目目录结构 文件夹 功能 components

  • iOS当多个网络请求完成后执行下一步的方法详解

    前言 在开发中,我们很容易遇到这样的需求,需要我们同时做多个网络请求,所有网络请求都完成后才能进行下一步的操作. 网络请求的任务是提交给子线程异步处理了,网络请求这样的任务也就快速执行完毕了,但是网络请求是一个任务,处理收到的网络响应又是一个任务,注意不要把这两个过程混为一谈. 如下载多个图片,下载完了才能展示,今天我们就来研究一下这个问题的解决方案. 解决方法 1.首先,我们创建一个项目,然后做一般性的做法,不做任何处理去连续请求一个接口10次: 先在viewDidLoad中创建第一种情况.

  • Flutter网络请求的3种简单实现方法

    概述: App几乎都离不开与服务器的交互,本文主要讲解了flutter网络请求三种方式 flutter自带的HttpClient. 第三方库http 和 第三方库Dio  的简单实现 GET 和 POST请求,本文是笔者学习Flutter网络模块知识总结,若有问题还望不腻赐教. 一.系统自带HttpClient 1.使用中温馨提示 1.1.导入库 import 'dart:io'; // 网络请求 import 'dart:convert'; // 数据解析 1.2.Uri的多种初始化方式 //

  • Android Xutils3网络请求的封装详解及实例代码

     Xutils3网络请求的封装详解 封装了一个Xutil3的网络请求工具类,分享给大家,本人水平有限,不足之处欢迎指出. 使用前先配置xutils3: 1.gradle中添加 compile 'org.xutils:xutils:3.3.40' 2.自定义Application /** * Created by Joe on 2016/9/25. */ public class MyApp extends Application { @Override public void onCreate(

  • Python爬虫库urllib的使用教程详解

    目录 Python urllib库 urllib.request模块 urlopen函数 Request 类 urllib.error模块 URLError 示例 HTTPError示例 URLError和HTTPError混合使用 urllib.parse模块 urlparse() urlunparse() urlsplit() urljoin() URL 转码 编码quote(string) 编码urlencode() 解码 unquote(string) urllib.robotparse

  • vue axios数据请求get、post方法及实例详解

    我们常用的有get方法以及post方法,下面简单的介绍一下这两种请求方法 vue中使用axios方法我们先安装axios这个方法 npm install --save axios 安装之后采用按需引入的方法,哪个页面需要请求数据就在哪个页面里引入一下. import axios from 'axios' 引入之后我们就可以进行数据请求了,在methods中创建一个方法 methods:{ getInfo(){ let url = "url" axios.get(url).then((r

  • 使用axios请求接口,几种content-type的区别详解

    axios的使用 安装(一般使用框架的话, 脚手架都集成了) $ npm install axios 请求示例 // POST axios.post('/user', { firstName: 'Fred', lastName: 'Flintstone' }) .then(function (response) { console.log(response); }) .catch(function (error) { console.log(error); }); // GET axios.ge

  • Python标准库学习之psutil内存详解

    目录 查询CPU信息 查询内存信息 查询磁盘信息 查询网络信息 查询进程信息 人生苦短,快学Python! 今天介绍的是psutil模块,它是一个跨平台库 https://github.com/giampaolo/psutil 命令行下通过pip安装: pip install psutil 如果跟我一样安装的是Anaconda,则剩下这步了,因为自带了. 顾名思义 psutil = process and system utilities 它专门用来获取操作系统以及硬件相关的信息,比如:CPU.

  • C++ STL标准库std::vector的使用详解

    目录 1.简介 2.使用示例 3.构造.析构.赋值 3.1std::vector::vector构造函数 3.2std::vector::~vector析构函数 3.3std::vector::operator=“=”符号 4.Iterators迭代器 4.1std::vector::begin 4.2std::vector::end 4.3std::vector::rbegin 4.4std::vector::rend 4.5std::vector::cbegin(C++11) 4.6std:

随机推荐