Flutter使用Dio和封装带加载框的网络请求

2024-03-29 15:18
文章标签 加载 使用 封装 请求 网络 flutter dio

本文主要是介绍Flutter使用Dio和封装带加载框的网络请求，希望对大家解决编程问题提供一定的参考价值，需要的开发者们随着小编来一起学习吧！

应用开发过程中肯定少不了网络操作，不管是请求数据还是下载资源等等，都需要使用到网络请求，这里就封装一个网络请求，并在请求中添加loading等待框，由开光控制是否显示，请求成功或者失败都关闭改弹窗。

添加配置

在使用第三方依赖的时候我们需要在根目录下的pubspec.yaml文件下dependencies中配置我们需要使用到的第三方库，同时可以到搜索第三方库最新版本资源进行搜索，比如搜索一个dio
在这里插入图片描述
就可以得到最新的版本信息，并查看最新详情
在这里插入图片描述
添加Dio依赖，这里一定要注意空白区域！！！！有强迫症的可别把空白区域删了，注意留出来。

  dio: ^4.0.0

在这里插入图片描述
添加flutter_easyloading依赖

  flutter_easyloading: ^3.0.0

封装网络访问模块

1.先通过一个util来控制loading加载框的显示和隐藏，创建一个loading_utils.dart文件：

import 'package:flutter_easyloading/flutter_easyloading.dart';bool loadingStatus = false;class LoadingUtils {static show({String showMsg}) {EasyLoading.show(status: showMsg);}static dismiss() {EasyLoading.dismiss();}
}

2.创建存放API地址的文件，api.dart:

import 'package:dio/dio.dart';import 'dio_mamager.dart';class Api{///根地址static const Base_Url = "https://www.wanandroid.com/";///获取首页banner列表static getBanner() async {return await DioManager().get('banner/json');}///获取首页文章列表  使用$符号拼接地址ARTICLE_LIST  以及  页码 pagestatic getArticleList({page = 0}) async {return DioManager().get('article/list/$page/json');}///项目标题static getProjectTree()async{return DioManager().get('project/tree/json');}///项目列表static getProjectList({page = 0, cid = 294}) async{return DioManager().get('project/list/$page/json?cid=$cid');}///体系数据static getTreeList() async{return await DioManager().get('tree/json');}///登录static toLogin({username,password}) async{FormData formData = FormData.fromMap({'username':username,'password':password});return await DioManager().post('user/login',data: formData);}///退出登录static toLoginOut() async{return await DioManager().get('user/logout/json');}///收藏站内文章  参数文章idstatic Future addCollection({articleId = 0}) async{return await DioManager().post('lg/collect/$articleId/json');}///取消收藏static Future cancelCollection({articleId = 0}) async{return await DioManager().post('lg/uncollect_originId/$articleId/json');}
}

3.创建网络管理，配置相关信息，并实现get 和 post请求：

先创建一个单例模式：

 Dio _dio;static DioManager _instance;static DioManager getInstance(){if(null == _instance){_instance = new DioManager();}return _instance;}

在构造方法中配置相关信息：

  DioManager(){_baseOptions = new BaseOptions(baseUrl: Api.Base_Url,connectTimeout: 5000,receiveTimeout: 5000,);_dio = new Dio(_baseOptions)..interceptors.add(CookieManager(cookieJar));//添加cookieJar  拦截器也可以在这里添加}

实现get请求：

  get(url, {data, options,withLoading = true}) async {if(withLoading){LoadingUtils.show(showMsg: "加载中...");}print('getRequest:==>path:${url}   params:${data}');Response response;try {response = await _dio.get(url, queryParameters: data, options: options);print('getResponse==>:${response.data}');if(withLoading){LoadingUtils.dismiss();}} on DioError catch (e) {print('getError:==>errorType:${e.type}   errorMsg:${e.message}');if(withLoading){LoadingUtils.dismiss();}}///response.data  请求成功是一个map最终需要将map进行转换 , 请求失败直接返回null///map:转换 ,将List中的每一个条目执行 map方法参数接收的这个方法,这个方法返回T类型，///map方法最终会返回一个  Iterable<T>return response.data;}

实现post请求：

post(url, {Map<String, dynamic> parameters,dynamic data,Options options,withLoading = true}) async {if(withLoading){LoadingUtils.show(showMsg: "加载中...");}print('postRequest:==>path:${url}   params:${data}');Response response;try {response = await _dio.post(url, queryParameters: parameters,data: data, options: options);print('postResponse==>:${response.data}');if(withLoading){LoadingUtils.dismiss();}}on DioError catch(e){print('postError:==>errorType:${e.type}   errorMsg:${e.message}');if(withLoading){LoadingUtils.dismiss();}}///response.data  请求成功是一个map最终需要将map进行转换 , 请求失败直接返回null///map:转换 ,将List中的每一个条目执行 map方法参数接收的这个方法,这个方法返回T类型，///map方法最终会返回一个  Iterable<T>return response.data;}

完整代码：


import 'package:cookie_jar/cookie_jar.dart';
import 'package:dio/dio.dart';
import 'package:dio_cookie_manager/dio_cookie_manager.dart';
import 'package:flutter_app_wandroid/ui/dialog/loading_utils.dart';import 'api.dart';class DioManager{static var cookieJar = CookieJar();Dio _dio;static DioManager _instance;BaseOptions _baseOptions;static DioManager getInstance(){if(null == _instance){_instance = new DioManager();}return _instance;}DioManager(){_baseOptions = new BaseOptions(baseUrl: Api.Base_Url,connectTimeout: 5000,receiveTimeout: 5000,);_dio = new Dio(_baseOptions)..interceptors.add(CookieManager(cookieJar));//添加cookieJar  拦截器也可以在这里添加}/*** get请求*/get(url, {data, options,withLoading = true}) async {if(withLoading){LoadingUtils.show(showMsg: "加载中...");}print('getRequest:==>path:${url}   params:${data}');Response response;try {response = await _dio.get(url, queryParameters: data, options: options);print('getResponse==>:${response.data}');if(withLoading){LoadingUtils.dismiss();}} on DioError catch (e) {print('getError:==>errorType:${e.type}   errorMsg:${e.message}');if(withLoading){LoadingUtils.dismiss();}}///response.data  请求成功是一个map最终需要将map进行转换 , 请求失败直接返回null///map:转换 ,将List中的每一个条目执行 map方法参数接收的这个方法,这个方法返回T类型，///map方法最终会返回一个  Iterable<T>return response.data;}/*** Post请求*/post(url, {Map<String, dynamic> parameters,dynamic data,Options options,withLoading = true}) async {if(withLoading){LoadingUtils.show(showMsg: "加载中...");}print('postRequest:==>path:${url}   params:${data}');Response response;try {response = await _dio.post(url, queryParameters: parameters,data: data, options: options);print('postResponse==>:${response.data}');if(withLoading){LoadingUtils.dismiss();}}on DioError catch(e){print('postError:==>errorType:${e.type}   errorMsg:${e.message}');if(withLoading){LoadingUtils.dismiss();}}///response.data  请求成功是一个map最终需要将map进行转换 , 请求失败直接返回null///map:转换 ,将List中的每一个条目执行 map方法参数接收的这个方法,这个方法返回T类型，///map方法最终会返回一个  Iterable<T>return response.data;}
}

调用

在api.dart文件中调用DioManager进行网络访问，比如访问玩安卓首页文章列表，这是一个异步请求：

  static getArticleList({page = 0}) async {return DioManager().get('article/list/$page/json');}

然后在要获取文章列表的位置进行调用：

Api.getArticleList(page: page).then((value) {if (value['data'] == null) throw Exception('${value['errorMsg']}');if (value != null && value['errorCode'] == 0) {//成功解析数据}}).catchError((e) {//失败});

在控制台就可以看到获取到的数据，上部分是banner，下部分是文章列表：
在这里插入图片描述
使用Dio进行一个简单的网络封装就实现了，可以根据自己的需求进行扩展。

这篇关于Flutter使用Dio和封装带加载框的网络请求的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！


http://www.chinasem.cn/article/858931。

相关文章

Spring Boot 配置文件之类型、加载顺序与最佳实践记录

Spring Boot 配置文件之类型、加载顺序与最佳实践记录

《SpringBoot配置文件之类型、加载顺序与最佳实践记录》SpringBoot的配置文件是灵活且强大的工具,通过合理的配置管理,可以让应用开发和部署更加高效,无论是简单的属性配置,还是复杂... 目录Spring Boot 配置文件详解一、Spring Boot 配置文件类型1.1 applicatio
阅读更多...
使用Sentinel自定义返回和实现区分来源方式

使用Sentinel自定义返回和实现区分来源方式

《使用Sentinel自定义返回和实现区分来源方式》：本文主要介绍使用Sentinel自定义返回和实现区分来源方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录Sentinel自定义返回和实现区分来源1. 自定义错误返回2. 实现区分来源总结Sentinel自定
阅读更多...
Pandas使用SQLite3实战

Pandas使用SQLite3实战

《Pandas使用SQLite3实战》本文主要介绍了Pandas使用SQLite3实战,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学... 目录1 环境准备2 从 SQLite3VlfrWQzgt 读取数据到 DataFrame基础用法：读
阅读更多...
JSON Web Token在登陆中的使用过程

JSON Web Token在登陆中的使用过程

《JSONWebToken在登陆中的使用过程》：本文主要介绍JSONWebToken在登陆中的使用过程,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教... 目录JWT 介绍微服务架构中的 JWT 使用结合微服务网关的 JWT 验证1. 用户登录，生成 JWT2. 自定义过滤
阅读更多...
Java中StopWatch的使用示例详解

Java中StopWatch的使用示例详解

《Java中StopWatch的使用示例详解》stopWatch是org.springframework.util包下的一个工具类,使用它可直观的输出代码执行耗时,以及执行时间百分比,这篇文章主要介绍... 目录stopWatch 是org.springframework.util 包下的一个工具类，使用它
阅读更多...
Java使用Curator进行ZooKeeper操作的详细教程

Java使用Curator进行ZooKeeper操作的详细教程

《Java使用Curator进行ZooKeeper操作的详细教程》ApacheCurator是一个基于ZooKeeper的Java客户端库,它极大地简化了使用ZooKeeper的开发工作,在分布式系统... 目录1、简述2、核心功能2.1 CuratorFramework2.2 Recipes3、示例实践3
阅读更多...
springboot security使用jwt认证方式

springboot security使用jwt认证方式

《springbootsecurity使用jwt认证方式》：本文主要介绍springbootsecurity使用jwt认证方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地... 目录前言代码示例依赖定义mapper定义用户信息的实体beansecurity相关的类提供登录接口测试提供一
阅读更多...
go中空接口的具体使用

go中空接口的具体使用

《go中空接口的具体使用》空接口是一种特殊的接口类型,它不包含任何方法,本文主要介绍了go中空接口的具体使用,具有一定的参考价值,感兴趣的可以了解一下... 目录接口-空接口1. 什么是空接口？2. 如何使用空接口？第一，第二，第三，3. 空接口几个要注意的坑坑1：坑2：坑3：接口-空接口1. 什么是空接
阅读更多...
springboot security快速使用示例详解

springboot security快速使用示例详解

《springbootsecurity快速使用示例详解》：本文主要介绍springbootsecurity快速使用示例,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝... 目录创www.chinasem.cn建spring boot项目生成脚手架配置依赖接口示例代码项目结构启用s
阅读更多...
Python如何使用__slots__实现节省内存和性能优化

Python如何使用__slots__实现节省内存和性能优化

《Python如何使用__slots__实现节省内存和性能优化》你有想过,一个小小的__slots__能让你的Python类内存消耗直接减半吗,没错,今天咱们要聊的就是这个让人眼前一亮的技巧,感兴趣的... 目录背景：内存吃得满满的类__slots__：你的内存管理小助手举个大概的例子：看看效果如何？1.
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2