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。

相关文章

中文分词jieba库的使用与实景应用（一）

中文分词jieba库的使用与实景应用（一）

知识星球：https://articles.zsxq.com/id_fxvgc803qmr2.html 目录 一.定义： 精确模式（默认模式）： 全模式： 搜索引擎模式： paddle 模式（基于深度学习的分词模式）： 二 自定义词典 三.文本解析   调整词出现的频率 四. 关键词提取 A. 基于TF-IDF算法的关键词提取 B. 基于TextRank算法的关键词提取
阅读更多...
使用SecondaryNameNode恢复NameNode的数据

使用SecondaryNameNode恢复NameNode的数据

1）需求： NameNode进程挂了并且存储的数据也丢失了，如何恢复NameNode 此种方式恢复的数据可能存在小部分数据的丢失。 2）故障模拟 （1）kill -9 NameNode进程 [lytfly@hadoop102 current]$ kill -9 19886 （2）删除NameNode存储的数据（/opt/module/hadoop-3.1.4/data/tmp/dfs/na
阅读更多...
Hadoop数据压缩使用介绍

Hadoop数据压缩使用介绍

一、压缩原则 （1）运算密集型的Job，少用压缩 （2）IO密集型的Job，多用压缩 二、压缩算法比较 三、压缩位置选择 四、压缩参数配置 1）为了支持多种压缩/解压缩算法，Hadoop引入了编码/解码器 2）要在Hadoop中启用压缩，可以配置如下参数
阅读更多...
Makefile简明使用教程

Makefile简明使用教程

文章目录 规则makefile文件的基本语法：加在命令前的特殊符号：.PHONY伪目标: Makefilev1 直观写法v2 加上中间过程v3 伪目标v4 变量 make 选项-f-n-C Make 是一种流行的构建工具，常用于将源代码转换成可执行文件或者其他形式的输出文件(如库文件、文档等)。Make 可以自动化地执行编译、链接等一系列操作。 规则 makefile文件
阅读更多...
使用opencv优化图片（画面变清晰）

使用opencv优化图片（画面变清晰）

文章目录 需求影响照片清晰度的因素 实现降噪测试代码 锐化空间锐化Unsharp Masking频率域锐化对比测试 对比度增强常用算法对比测试 需求 对图像进行优化，使其看起来更清晰，同时保持尺寸不变，通常涉及到图像处理技术如锐化、降噪、对比度增强等 影响照片清晰度的因素 影响照片清晰度的因素有很多，主要可以从以下几个方面来分析 1. 拍摄设备 相机传感器：相机传
阅读更多...
Linux 网络编程 --- 应用层

Linux 网络编程 --- 应用层

一、自定义协议和序列化反序列化 代码： 序列化反序列化实现网络版本计算器 二、HTTP协议 1、谈两个简单的预备知识 https://www.baidu.com/ --- 域名 --- 域名解析 --- IP地址 http的端口号为80端口，https的端口号为443 url为统一资源定位符。CSDNhttps://mp.csdn.net/mp_blog/creation/editor
阅读更多...
pdfmake生成pdf的使用

pdfmake生成pdf的使用

实际项目中有时会有根据填写的表单数据或者其他格式的数据，将数据自动填充到pdf文件中根据固定模板生成pdf文件的需求 文章目录 利用pdfmake生成pdf文件1.下载安装pdfmake第三方包2.封装生成pdf文件的共用配置3.生成pdf文件的文件模板内容4.调用方法生成pdf 利用pdfmake生成pdf文件 1.下载安装pdfmake第三方包 npm i pdfma
阅读更多...
零基础学习Redis(10) -- zset类型命令使用

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合，内部除了存储元素外，还会存储一个score，存储在zset中的元素会按照score的大小升序排列，不同元素的score可以重复，score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]
阅读更多...
git使用的说明总结

git使用的说明总结

Git使用说明 下载安装(下载地址) macOS: Git - Downloading macOS Windows: Git - Downloading Windows Linux/Unix: Git (git-scm.com) 创建新仓库 本地创建新仓库：创建新文件夹，进入文件夹目录，执行指令 git init ，用以创建新的git 克隆仓库 执行指令用以创建一个本地仓库的
阅读更多...
ASIO网络调试助手之一：简介

ASIO网络调试助手之一：简介

多年前，写过几篇《Boost.Asio C++网络编程》的学习文章，一直没机会实践。最近项目中用到了Asio，于是抽空写了个网络调试助手。 开发环境： Win10 Qt5.12.6 + Asio(standalone) + spdlog 支持协议： UDP + TCP Client + TCP Server 独立的Asio（http://www.think-async.com）只包含了头文件，不依
阅读更多...

Copyright China编程 23002807@qq.com

沪ICP备2023033072号-2