iis服务器助手广告广告
返回顶部
首页 > 资讯 > 移动开发 >Flutter网络请求Dio库的使用及封装详解
  • 192
分享到

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

2024-04-02 19:04:59 192人浏览 八月长安
摘要

目录一、项目目录结构二、封装思路:三、添加依赖四、简单实现网络请求五、实现登录注册服务六、使用service服务dart语言内置的HttpClient实现了基本的网络请求相关的操作。

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

--结束END--

本文标题: Flutter网络请求Dio库的使用及封装详解

本文链接: https://www.lsjlt.com/news/145964.html(转载时请注明来源链接)

有问题或投稿请发送至: 邮箱/279061341@qq.com    QQ/279061341

本篇文章演示代码以及资料文档资料下载

下载Word文档到电脑,方便收藏和打印~

下载Word文档
猜你喜欢
  • Flutter网络请求Dio库的使用及封装详解
    目录一、项目目录结构二、封装思路:三、添加依赖四、简单实现网络请求五、实现登录注册服务六、使用service服务Dart语言内置的HttpClient实现了基本的网络请求相关的操作。...
    99+
    2024-04-02
  • Flutter网络请求Dio库的使用及封装方法
    这篇文章主要讲解了“Flutter网络请求Dio库的使用及封装方法”,文中的讲解内容简单清晰,易于学习与理解,下面请大家跟着小编的思路慢慢深入,一起来研究和学习“Flutter网络请求Dio库的使用及封装方法”吧!Dart语言内置的Http...
    99+
    2023-06-30
  • Flutter网络请求库DIO的基本使用
    目录1. 导入dio包 2. 导入并创建实例 3.基本配置 4.使用示例 1. 导入dio包 目前dio库的最新版本是3.0.1,同使用其他三方库一样,Flutter中使用dio库...
    99+
    2024-04-02
  • 如何在Flutter中使用DIO网络请求库
    这篇文章将为大家详细讲解有关如何在Flutter中使用DIO网络请求库,文章内容质量较高,因此小编分享给大家做个参考,希望大家阅读完这篇文章后对相关知识有一定的了解。1. 导入dio包目前dio库的最新版本是3.0.1,同使用其他三方库一样...
    99+
    2023-06-14
  • Flutter网络请求框架Dio源码分析以及封装(一)--请求流程分析
    Flutter网络请求框架Dio源码分析以及封装--请求流程分析 前言目的请求流程-构造Dio对象请求流程-构造请求参数请求流程-构建请求流并添加拦截器请求流程-请求分发总结 前言 利用...
    99+
    2023-09-01
    flutter
  • 详解Flutter中网络框架dio的二次封装
    其实dio框架已经封装的很好了,但是在实战项目中,为了项目可以统一管理,还是需要对dio框架进行二次封装。 整体思路:一般情况下,后台返回的数据我们可以分为两部分 1.状态数据2.渲...
    99+
    2024-04-02
  • fetch网络请求封装示例详解
    export default ({ url, method = 'GET', data = null, }) => { // 请求配置 let opt...
    99+
    2024-04-02
  • Flutter 将Dio请求转发原生网络库的实现方案
    目录背景实现方案实现步骤交互协议注意点背景 首先看到标题,相信大家已经血压飙升了,既然都用了Flutter,怎么还用原生的网络库呢?这不是多此一举么。emmmmm,当我看到这个需求的...
    99+
    2024-04-02
  • 【小程序】网络请求API介绍及网络请求的封装
    文章目录 网络请求基本演练和封装网络请求基本演练网络请求配置域名网络请求的封装 网络请求基本演练和封装 网络请求基本演练 微信提供了专属的API接口,用于网络请求: wx.req...
    99+
    2023-09-04
    小程序 网络 微信小程序
  • Flutter Http网络请求实现详解
    Http网络请求是一门开发语言里比较常用和重要的功能,主要用于资源访问、接口数据请求和提交、上传下载文件等等操作,Http请求方式主要有:GET、POST、HEAD、PUT、DELE...
    99+
    2024-04-02
  • Flutter中网络框架dio的二次封装怎么实现
    这篇文章主要介绍“Flutter中网络框架dio的二次封装怎么实现”,在日常操作中,相信很多人在Flutter中网络框架dio的二次封装怎么实现问题上存在疑惑,小编查阅了各式资料,整理出简单好用的操作方法,希望对大家解答”Flutter中网...
    99+
    2023-06-30
  • react使用axios进行api网络请求的封装方法详解
    目录前言准备工作开始封装axiosconfig.jsrequest.js进行请求总结前言 最近写react项目使用到axios进行请求封装,在这里记录一下,希望可以帮助到初学的小伙伴...
    99+
    2024-04-02
  • flutter中的网络请求数据获取详解
    目录跨平台的http请求请求数据添加http包发起请求将响应转为常用对象获取数据展示数据为什么要在initstate中获取数据?跨平台的http请求 http包提供了最简单的发起请...
    99+
    2023-01-11
    flutter网络请求数据获取 flutter 数据获取
  • Vue项目的网络请求代理到封装步骤详解
    目录1.创建vue项目2.安装axios3.进行config.js配置4.main.js里引入5.src目录下新建Utils文件夹,在内封装request.js6.以login路由为...
    99+
    2023-05-18
    Vue网络请求代理到封装 Vue网络请求
  • vue3中封装Axios请求及在组件中使用详解
    目录前言一、创建文件夹存放封装好的js二、封装代码如下三、配置四、在需要的组件中使用补充:通过具体配置解决跨域问题CORS总结前言  这篇文章直接能够在项目中使用,没有解释...
    99+
    2023-05-17
    vue3 axios封装 vue 封装请求 vue3封装axios请求
  • ajax网络请求封装的示例分析
    这篇文章主要为大家展示了“ajax网络请求封装的示例分析”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“ajax网络请求封装的示例分析”这篇文章吧。实例代码://...
    99+
    2024-04-02
  • 使用Flutter怎么实现一个Http网络请求
    这期内容当中小编将会给大家带来有关使用Flutter怎么实现一个Http网络请求,文章内容丰富且以专业的角度为大家分析和叙述,阅读完这篇文章希望大家可以有所收获。1. Http的请求方式简介Http网络请求方式就是描述了客户端想对指定的资源...
    99+
    2023-06-14
  • Python 网页请求之requests库的使用详解
    目录1.requests库简介2.requests库方法介绍3.代码实例1.requests库简介 requests 是 Python 中比较常用的网页请求库,主要用来发送 HTTP...
    99+
    2024-04-02
  • httpproxy对网络请求进行代理使用详解
    目录正文命令行启动服务器详细的调用栈捕捉错误正文 使用下面这段简单的代码对网络请求进行代理: const http = require('http'); const httpProx...
    99+
    2024-04-02
  • 微信小程序网络请求封装的示例分析
    这篇文章给大家分享的是有关微信小程序网络请求封装的示例分析的内容。小编觉得挺实用的,因此分享给大家做个参考,一起跟随小编过来看看吧。在这里首先声明一个小程序文档的bug,导致大伙们在请求的时候,服务器收到不...
    99+
    2024-04-02
软考高级职称资格查询
编程网,编程工程师的家园,是目前国内优秀的开源技术社区之一,形成了由开源软件库、代码分享、资讯、协作翻译、讨论区和博客等几大频道内容,为IT开发者提供了一个发现、使用、并交流开源技术的平台。
  • 官方手机版

  • 微信公众号

  • 商务合作