FlutterWeb-05-Solicitud de red

La dirección git de este artículo: gitee.com/gyy_xiaobai…

El entorno de ejecución de código de este artículo: en el modo nativo, ejecutándose en el teléfono móvil (modo de construcción no web)

Uno, instalar dependencias

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

paquete dio: utilizado para enviar solicitudes de red

cookie_jar, dio_cookie_manager: implementar conjuntamente la gestión automática de cookies de dio

En segundo lugar, administrador personalizado dio

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);
  }
}
复制代码

Las funciones principales son las siguientes:

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

3. Tomando como ejemplo la interfaz de inicio de sesión de la API de Android, una solicitud para devolver

1. Inicie sesión para devolver la entidad

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. Método de solicitud de red

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. La interfaz recibe el resultado de la solicitud de red.

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);
}
复制代码

En cuarto lugar, si está interesado, descargue la demostración para verla. Bienvenido a dejar un mensaje para la comunicación.