本文主要是介绍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和封装带加载框的网络请求的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
