Flutter:网络请求 Dio简单封装及请求实例和注意问题

flutter中网络请求一般使用 Dio 库，下面我就来基于Dio库做一下简单封装和使用实例以及遇到的问题。

具体请去官网了解： https://pub.dev/packages/dio

首先在项目的 pubspec.yaml文件中  引入相关库：

  # 网络请求
  dio: ^3.0.10
  # cookie 管理
  dio_cookie_manager: ^1.0.0

Dio是一个强大的Dart Http请求库，支持Restful API、FormData、拦截器、请求取消、Cookie管理、文件上传/下载、超时、自定义适配器等，具体可以官网查看。

下面我写了个简单的封装类，由于刚开始接触，只简单写了get/post使用：

import 'dart:convert';

import 'package:common_utils/common_utils.dart';
import 'package:cookie_jar/cookie_jar.dart';
import 'package:dio/dio.dart';
import 'PrivateCookieManager.dart';

/*
 * author  Min
 * time    2020/12/26
 * desc    网络请求dio封装
 */
class HttpGo {

  static HttpGo instance;
  static Dio dio;

  static HttpGo getInstance() {
    if (instance == null) {
      dio = Dio();
      instance = HttpGo();
    }
    return instance;
  }

  HttpGo() {
    //设置options
    BaseOptions options = new BaseOptions();
    //设置 header--可选--存放一些公共的请求头信息
    Map<String, dynamic> headers = new Map();
    options.headers = headers;
    //超时设置--可选
    options.connectTimeout = 5000;
    options.receiveTimeout = 5000;
    options.sendTimeout = 5000;
    //设置 baseurl--可选
    options.baseUrl = "http://apis.juhe.cn";
    dio.options = options;

    //cookie管理--可选
    CookieJar cookieJar = PersistCookieJar();
    dio.interceptors.add(PrivateCookieManager(cookieJar));

    //添加拦截器--可选
    dio.interceptors
        .add(InterceptorsWrapper(onRequest: (RequestOptions options) {
      return options;
    }, onResponse: (Response response) {
      return response;
    }, one rror: (DioError e) {
      return e;
    }));

    //开启请求日志--可选---要放在其他所有之后才会生效
    dio.interceptors.add(LogInterceptor(responseBody: true, requestBody: true));
  }

  /*
   * get请求
   */
  Future<dynamic> get(String url, {Map<String, dynamic> params}) async {
    Response response;
    try {
      response = await dio.get(url, queryParameters: params);
      LogUtil.v(response);
    } catch (e) {
      formatError(e);
    }
    return response.data;
  }

  /*
   * post请求
   */
  Future<dynamic> post(String url, {Map<String, dynamic> params}) async {
    Response response;
    try {
      response = await dio.post(url, data: params);
      LogUtil.v(response);
    } catch (e) {
      formatError(e);
    }
    return response.data;
  }

  /*
  * error统一处理
  */
  void formatError(DioError e) {
    if (e.type == DioErrorType.CONNECT_TIMEOUT) {
      LogUtil.v("连接超时");
    } else if (e.type == DioErrorType.SEND_TIMEOUT) {
      LogUtil.v("请求超时");
    } else if (e.type == DioErrorType.RECEIVE_TIMEOUT) {
      LogUtil.v("响应超时");
    } else if (e.type == DioErrorType.RESPONSE) {
      LogUtil.v("出现异常");
    } else if (e.type == DioErrorType.CANCEL) {
      LogUtil.v("请求取消");
    } else {
      LogUtil.v("未知错误");
    }
  }
}

下面再测试下：

/*
 * 请求实例
 */
void main() {
  //初始化log工具
  LogUtil.init(isDebug: true);

  //查询手机号码归属地--（来自聚合数据）
  Map<String, dynamic> param = {
    "key": "----这里输入key---",
    "phone": "----这里输入手机号---",
    "dtype": "json"
  };

  //get方式
  var result = HttpGo.getInstance().get("/mobile/get", params: param);

  //post方式
  var result2 = HttpGo.getInstance().post("/mobile/get", params: param);
}

好了，一个简单的网络请求到此结束。下面我们来说一下注意事项。

1.关于cookie :这里我写下了CookieManager，因为cookie包含了一些特殊字符，如:[];()@,?=等，会导致解析报错，并抛出以下异常，文件及详情可去看我的另一篇博文 ：https://blog.csdn.net/zhangyiminsunshine/article/details/111735229

2.关于post请求中提交参数的问题

dio中如果设置了 BaseOptions ，baseoptions的queryParameters 会让之后的  queryParameters失效，导致post参数提交不上去

应使用： 

 response = await dio.post(url, data: params);

本文为原创文章，未经本人同意，不得转载。

标签：dio,请求,Flutter,options,Dio,LogUtil,post,response
来源： https://blog.csdn.net/zhangyiminsunshine/article/details/111754718