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

Posted 2023-03-30 WEB前端李志杰

Dart语言内置的HttpClient实现了基本的网络请求相关的操作。但HttpClient本身功能较弱，很多网络请求常用功能都不支持，因此在实际项目中，我们更多是使用dio库实现网络请求。

注：Flutter官网同样推荐在项目中使用Dio库。

Dio文档地址： pub.dev地址：dio | Dart Package

一、项目目录结构

文件夹	功能
components	放置全局共用组件
router	全局路由管理
service	管理接口请求并对返回数据进行处理，复杂功能逻辑处理
store	provider全局状态管理
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';

/// 请求方法
enum DioMethod 
  get,
  post,
  put,
  delete,
  patch,
  head,


class DioUtil 
  /// 单例模式
  static DioUtil? _instance;
  factory DioUtil() => _instance ?? DioUtil._internal();
  static DioUtil? get instance => _instance ?? DioUtil._internal();

  /// 连接超时时间
  static const int connectTimeout = 60 * 1000;

  /// 响应超时时间
  static const int receiveTimeout = 60 * 1000;

  /// Dio实例
  static Dio _dio = Dio();

  /// 初始化
  DioUtil._internal() 
    // 初始化基本选项
    BaseOptions options = BaseOptions(
        baseUrl: 'http://127.0.0.1:7001/app/',
        connectTimeout: connectTimeout,
        receiveTimeout: receiveTimeout);
    _instance = this;
    // 初始化dio
    _dio = Dio(options);
    // 添加拦截器
    _dio.interceptors.add(InterceptorsWrapper(
        onRequest: _onRequest, onResponse: _onResponse, onError: _onError));
  

  /// 请求拦截器
  void _onRequest(RequestOptions options, RequestInterceptorHandler handler) 
    // 对非open的接口的请求参数全部增加userId
    if (!options.path.contains("open")) 
      options.queryParameters["userId"] = "xxx";
    
    // 头部添加token
    options.headers["token"] = "xxx";
    // 更多业务需求
    handler.next(options);
    // super.onRequest(options, handler);
  

  /// 相应拦截器
  void _onResponse(
      Response response, ResponseInterceptorHandler handler) async 
    // 请求成功是对数据做基本处理
    if (response.statusCode == 200) 
      // ....
     else 
      // ....
    
    if (response.requestOptions.baseUrl.contains("???????")) 
      // 对某些单独的url返回数据做特殊处理
    
    handler.next(response);
  
  
  /// 错误处理
  void _onError(DioError error, ErrorInterceptorHandler handler) 
    handler.next(error);
  

  /// 请求类
  Future<T> request<T>(
    String path, 
    DioMethod method = DioMethod.get,
    Map<String, dynamic>? params,
    data,
    CancelToken? cancelToken,
    Options? options,
    ProgressCallback? onSendProgress,
    ProgressCallback? onReceiveProgress,
  ) async 
    const _methodValues = 
      DioMethod.get: 'get',
      DioMethod.post: 'post',
      DioMethod.put: 'put',
      DioMethod.delete: 'delete',
      DioMethod.patch: 'patch',
      DioMethod.head: 'head'
    ;
    options ??= Options(method: _methodValues[method]);
    try 
      Response response;
      response = await _dio.request(path,
          data: data,
          queryParameters: params,
          cancelToken: cancelToken,
          options: options,
          onSendProgress: onSendProgress,
          onReceiveProgress: onReceiveProgress);
      return response.data;
     on DioError catch (e) 
      rethrow;
    
  

  /// 开启日志打印
  /// 需要打印日志的接口在接口请求前 DioUtil.instance?.openLog();
  void openLog() 
    _dio.interceptors
        .add(LogInterceptor(responseHeader: false, responseBody: true));
  

五、实现登录注册服务

在lib下新建service目录，并在service目录中新建login.dart文件。

import 'package:flutter_dio/utils/dio_util.dart';

class LoginService 
  /// 单例模式
  static LoginService? _instance;
  factory LoginService() => _instance ?? LoginService._internal();
  static LoginService? get instance => _instance ?? LoginService._internal();

  /// 初始化
  LoginService._internal() 
    // 初始化基本选项
  

  /// 获取权限列表
  getUser() async 
    /// 开启日志打印
    DioUtil.instance?.openLog();

    /// 发起网络接口请求
    var result = await DioUtil().request('get_user', method: DioMethod.get);
    return result.data;
  

六、使用service服务

  @override
  void initState() 
    // TODO: implement initState
    super.initState();

    /// 发起网络接口请求
    LoginService().getUser().then((value) => print(value));
  

往期内容：

一、半天时间掌握Dart开发语言-基础学习

二、半天时间掌握Dart开发语言-类的学习

三、【Flutter开发环境搭建】Java SDK安装

四、【Flutter开发环境搭建】Android SDK、Dart SDK及Flutter SDK安装_

五、Flutter路由传参

六、flutter全局状态管理Provider

七、Flutter自定义iconfont字体图标

Flutter--网络请求dio封装网络请求框架

dio简介

• dio库支持文件的上传和下载，Cookie管理、FormData、请求/取消、拦截器等，和Android中的OkHttp库相似

基本用法

import package:dio/dio.dart;

_loadDataGet() async 
  try 
    Response response = await Dio().get("https://www.baidu.com");
    print(response);
   catch (e) 
    print(e);
  


_loadDataPost() async 
  try 
    Response response = await Dio().post("path", data: );
    print(response);
   catch (e) 
    print(e);
  

Dio单例

var dio = new Dio(BaseOptions(
  baseUrl: "url",
  connectTimeout: 5000,
  receiveTimeout: 10000,
  
  headers:
    HttpHeaders.userAgentHeader: "dio",
    "api": "1.0.0",
  ,
  contentType: ContentType.json,
  responseType: ResponseType.plain
));

Dio拦截器

• 官方示例

dio.interceptors.add(InterceptorsWrapper(
onRequest:(RequestOptions options) async 
    // 请求发送前处理
return options; //continue
,
onResponse:(Response response) async 
// 在返回响应数据之前做一些预处理
return response; // continue
,
onError: (DioError e) async 
// 当请求失败时做一些预处理
return e;//continue

));

• 注意：

• 在拦截器做request处理时，可以直接返回options,这个时候会继续处理then方法里的逻辑，如果想要完成请求并返回一些自定义的数据，可以返回一个Response对象或返回dio.resolve(data),可以使得请求终止，上层的then会被调用，then中返回的数据是自定义的数据

封装dio网络请求

• 首先创建一个单例

class HttpRequest 
  static String _baseUrl = Api.BASE_URL;
  static HttpRequest instance;

  Dio dio;
  BaseOptions options; // 基类请求配置，还可以使用Options单次请求配置，RequestOptions实际请求配置对多个域名发起请求

  CancelToken cancelToken = CancelToken();

  static HttpRequest getInstance() 
    if (instance == null) 
      instance = HttpRequest();
    
    return instance;
  

• 配置并初始化dio参数

HttpRequest() 
  options = BaseOptions(
    // 访问url
    baseUrl: _baseUrl,
    // 连接超时时间
    connectTimeout: 5000,
    // 响应流收到数据的间隔
    receiveTimeout: 15000,
    // http请求头
    headers: "version": "1.0.0",
    // 接收响应数据的格式
    responseType: ResponseType.plain,
  );
  dio = Dio(options);
  
  // 在拦截其中加入Cookie管理器
  dio.interceptors.add(CookieManager(CookieJar()));
  
  //添加拦截器
  dio.interceptors.add(InterceptorsWrapper(onRequest: (RequestOptions options) 
    // Do something before request is sent
    return options; //continue
  , onResponse: (Response response) 
    // Do something with response data
    return response; // continue
  , onError: (DioError e) 
    // Do something with response error
    return e; //continue
  ));

• 取消请求

// cancelToken可用于多个请求，也可同时取消多个请求
void cancelRequests(CancelToken token)   
    token.cancel("cancelled");

• get请求

get(url,
    data,
      options,
      cancelToken,
      BuildContext context,
      Function successCallBack,
      Function errorCallBack) async 
  Response response;
  try 
    response = await dio.get(url,
        queryParameters: data, options: options, cancelToken: cancelToken);
   on DioError catch (e) 
    handlerError(e);
  
  if (response.data != null) 
    BaseResponse baseResponse =
    BaseResponse.fromJson(json.decode(response.data));
    if (baseResponse != null) 
      switch (baseResponse.errorCode) 
        case 成功状态码:
          successCallBack(jsonEncode(baseResponse.data));
          break;
        case 其他状态码:
          errorCallBack(baseResponse.errorCode, baseResponse.errorMessage);

          break;
        default:
          errorCallBack(baseResponse.errorCode, baseResponse.errorMessage);
          break;
      
     else 
      errorCallBack(Constants.NETWORK_JSON_EXCEPTION, "网络数据问题");
    
   else 
    errorCallBack(Constants.NETWORK_ERROR, "网络出错啦，请稍后重试");
  

• 注意：

• url：请求地址
• data：请求参数
• options：请求配置
• cancelToken：取消标识

• post请求

post(url,
    data,
      options,
      cancelToken,
      BuildContext context,
      Function successCallBack,
      Function errorCallBack) async 
  Response response;
  try 
    response = await dio.post(url,
        queryParameters: data, options: options, cancelToken: cancelToken);
   on DioError catch (e) 
    handlerError(e);
  
  if (response.data != null) 
    BaseResponse baseResponse =
    BaseResponse.fromJson(json.decode(response.data));
    if (baseResponse != null) 
      switch (baseResponse.errorCode) 
        case 成功状态码:
          successCallBack(jsonEncode(baseResponse.data));
          break;
        case 其他状态码:
          errorCallBack(baseResponse.errorCode, baseResponse.errorMessage);
          break;
        default:
          errorCallBack(baseResponse.errorCode, baseResponse.errorMessage);
          break;
      
     else 
      errorCallBack(Constants.NETWORK_JSON_EXCEPTION, "网络数据问题");
    
   else 
    errorCallBack(Constants.NETWORK_ERROR, "网络出错啦，请稍后重试");
  

• 下载文件

downloadFile(urlPath, savePath) async 
  Response response;
  try 
    response = await dio.download(urlPath, savePath,onReceiveProgress: (int count, int total)
      //进度
      print("$count $total");
    );
    print(downloadFile success---------$response.data);
   on DioError catch (e) 
    print(downloadFile error---------$e);
    handlerError(e);
  
  return response.data;

• 错误处理

handlerError(DioError e) 
  if (e.type == DioErrorType.CONNECT_TIMEOUT) 
    print("连接超时");
   else if (e.type == DioErrorType.SEND_TIMEOUT) 
    print("请求超时");
   else if (e.type == DioErrorType.RECEIVE_TIMEOUT) 
    print("响应超时");
   else if (e.type == DioErrorType.RESPONSE) 
    print("响应异常");
   else if (e.type == DioErrorType.CANCEL) 
    print("请求取消");
   else 
    print("未知错误");