FlutterWeb-05-网络请求

本文git地址：gitee.com/gyy_xiaobai…

本文代码运行环境：以native方式，运行在手机上（非web构建方式）

一，安装依赖

dio: ^4.0.4
cookie_jar: 3.0.1
dio_cookie_manager: ^2.0.0
复制代码

dio包：用以发送网络请求

cookie_jar, dio_cookie_manager: 共同实现dio的cookie自动管理

二，dio自定义的Manager

class DioManager {
  Dio dio = Dio();
  static final CookieJar cookieJar = CookieJar();
  static DioManager? _instance;

  static DioManager getInstance() {
    if (_instance == null) {
      _instance = DioManager();
      _instance!._init();
    }
    return _instance!;
  }

  void _init() {
    dio.options.connectTimeout = 10000;
    dio.options.receiveTimeout = 10000;
    //响应的数据类型
    dio.options.responseType = ResponseType.json;
    //请求的contentType
    dio.options.contentType = "application/x-www-form-urlencoded";
    //网络请求的baseUrl：https://www.wanandroid.com/
    dio.options.baseUrl = Environment.baseUrl;
    dio.interceptors.add(ApiInterceptor()); //请求拦截器
    //cookie
    dio.interceptors.add(CookieManager(cookieJar));
  }
  //设置baseUrl
  void setBaseUrl(String baseUrl) {
    dio.options.baseUrl = baseUrl;
  }

  //原生开发，通过header添加cookie
  void setHeader(Map<String, String>? headers) {
    dio.options.headers = headers;
  }

  ///post json
  Future post(String path, {Map<String, dynamic>? params, bool withLoading = true,}) async {
    try {
      Response response = await dio.post(path, data: params);
      return handleResponse(response);
    } on DioError catch (e) {
      return handleFailed(e.response);
    }
  }


  ///get
  Future get(String path, {Map<String, dynamic>? params, bool withLoading = true,}) async {
    try {
      Response response = await dio.get(path, queryParameters: params);
      return handleResponse(response);
    } on DioError catch (e) {
      return handleFailed(e.response);
    }
  }

  //处理成功的数据
  Future handleResponse(Response response) {
    RespData respData = RespData.fromJson(response.data);
    if(respData.data == null) {
      return handleFailed(response);
    }
    //取出response.data.data，并返回
    return Future.value(respData.data);
  }

  // 处理失败的数据
  Future handleFailed(Response? response) {
    debugPrint('---api-resp---->error------>$response');
    //response.data 转换为 RespData，并返回
    var map = RespData.fromJson(response?.data);
    return Future.value(map);
  }
}
复制代码

主要实现功能如下：

> 1，单例的dio对象
> 2，添加cookie自动管理
> 3，可以设置baseUrl
> 4，可以设置header
> 5，统一解析成功或失败的网络请求
复制代码

三，以玩安卓APi登陆接口为例的一次请求到返回

1，登陆返回实体

class LoginData implements ResponseError{
  String? nickname;
  String? password;
  String? publicName;
  String? token;
  int? type;
  String? username;

  @override
  RespData? dioError;
  LoginData.fromDioError(dynamic error) {
    dioError = error;
  }
  
  LoginData.fromJson(Map<String, dynamic> json) {
    nickname = json['nickname'];
    password = json['password'];
    publicName = json['publicName'];
    token = json['token'];
    type = json['type'];
    username = json['username'];
  }

  Map<String, dynamic> toJson() {
    final Map<String, dynamic> data = new Map<String, dynamic>();
    data['token'] = this.token;
    data['type'] = this.type;
    data['username'] = this.username;
    return data;
  }
}
复制代码

fromDioError函数：请求错误的时候，走这个函数，对dioError字段赋值
fromJson函数：请求正常的时候，走这个函数，对实体的业务字段赋值
复制代码

2，网络请求方法

class ApiPost{
  ///登录
  static Future loginPost(Map<String, dynamic> params) async {
    var resp = await DioManager.getInstance().post('user/login', params: params);
    if(resp is RespData) {
      //处理错误
      return  LoginData.fromDioError(resp);
    }
    //处理成功
    return LoginData.fromJson(resp);
  }
}
复制代码

3，界面接收网络请求结果

void _loginWanAndroid() async{
  Map<String, dynamic> queryParameters = Map();
  queryParameters['username'] = controllerUser.text.toString();
  queryParameters['password'] = controllerPassword.text.toString();
  //登录
  LoginData loginData = await ApiPost.loginPost(queryParameters);
  if (loginData.dioError != null) {
    //错误的时候，处理逻辑
    debugPrint(loginData.dioError?.errorMsg);
    return;
  }
  //成功的时候，处理逻辑： 保存登陆信息到store
  Store.of<LoginStore>(listen: false).setData(loginData);
}
复制代码

四，感兴趣的，具体下载demo查看，欢迎留言交流