一文带你掌握Flutter dio网络请求库的封装

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

highlight: an-old-hope

封装网络库考虑的几个方面：

请求参数的封装：

将请求所需的参数进行封装，例如 URL、请求头、请求体等。可以定义一个统一的数据结构或模型类来表示请求参数，以便于传递和管理。

响应结果的封装：

将网络请求返回的响应结果进行封装，例如状态码、响应头、响应体等。同样，可以定义一个统一的数据结构或模型类来表示响应结果，以便于处理和解析。

错误处理的封装：

对网络请求可能出现的错误进行封装和处理，例如网络连接失败、超时、服务器错误等。可以定义自定义的异常类或错误码，以及相应的错误处理机制。

拦截器的封装：

如果第三方网络库支持拦截器机制，你可以封装拦截器，用于在请求发起前或响应返回后进行额外的处理，如添加身份验证、日志记录等。

封装示例

/** @Author: HaiJun* @FilePath: \flutter_demo_show\lib\utils\http.dart* @Description: * */
import 'package:dio/dio.dart';
import './CustomInterceptor.dart';class HttpApi {// 配置基本的请求选项static final BaseOptions options = BaseOptions(baseUrl: 'http://localhost:3001/', // 设置请求的基础 URLmethod: 'GET', //默认请求方法connectTimeout: const Duration(seconds: 5), // 设置连接超时时间为 5 秒receiveTimeout: const Duration(seconds: 3), // 设置接收超时时间为 3 秒headers: {'User-Agent': 'Dio', // 设置请求头信息},);static Dio dio = Dio(options);static Future<T> request<T>(String url,{String method = "get", Map<String, dynamic>? params}) async {// 1请求的单独配置final options = Options(method: method);// 2 添加一个拦截器Interceptor inter = InterceptorsWrapper(onRequest: (options, handler) {return handler.next(options);},onResponse: (e, handler) {print(e);return handler.next(e);},onError: (e, handler) {print(e);return handler.next(e);},);List<Interceptor> inters = [];inters.add(CustomInterceptor()); //添加自定义拦截器inters.add(LogInterceptor()); //添加内置拦截器dio.interceptors.addAll(inters);// 3 发起网络请求try {Response response =await dio.request<T>(url, queryParameters: params, options: options);print("测试");print(url);return response.data;} catch (e) {print(e);return Future.error(e);}}
}

调用请求

把封装好的文件导入进来，

import 'package:flutter/material.dart';
import 'utils/http.dart';class MyNetwork extends StatefulWidget {const MyNetwork({super.key});@overrideState<MyNetwork> createState() => _MyNetworkState();
}class _MyNetworkState extends State<MyNetwork> {void getData() async {print("发起请求");var responseData = await HttpApi.request('book');print(responseData);}@overrideWidget build(BuildContext context) {return Container(child: Column(children: [ElevatedButton(onPressed: () {getData();},child: const Text("发起请求"))]));}
}