「这是我参与11月更文应战的第8天,活动概况检查:2021最终一次更文应战」

功用检查

今日咱们要看下网络调试功用是如何实现的, 老规矩先来看看该功用是什么样的,当咱们经过dio进行网络恳求后,会记载网络恳求的信息,点击cell能够检查恳求概况

UME: 网络调试

UME: 网络调试

所以今日分两个部分来看源码 第一部分是经过什么办法来记载每个接口恳求数据的,第二个是每个接口的恳求数据是如何展现出来的

源码检查

今日检查的代码在flutter_ume_kit_dio中

数据记载

在main.dart中注册时需求传入dio目标,然后给dio增加interceptors,这样在http_interceptor.dart中 就能够重写onRequestonResponseonError三个办法,然后把response存入httpContainer中

UME: 网络调试

这时候咱们就拿到了一切网络恳求的response,至此数据记载的代码就结束了,下面来看看数据展现的代码

数据展现

数据展现的代码在pluggable_state.dart中,经过InspectorInstance.httpContainer.pagedRequests获取一切response信息, 在ResponseCardState中会有获取信息的get办法

Response<dynamic> get _response => widget.response;
RequestOptions get _request => _response.requestOptions;
/// The start time for the [_request].
DateTime get _startTime => _response.startTime;
/// The end time for the [_response].
DateTime get _endTime => _response.endTime;
/// The duration between the request and the response.
Duration get _duration => _endTime.difference(_startTime);
/// Status code for the [_response].
int get _statusCode => _response.statusCode ?? 0;
/// Colors matching status.
Color get _statusColor {
  if (_statusCode >= 200 && _statusCode < 300) {
    return Colors.lightGreen;
  }
  if (_statusCode >= 300 && _statusCode < 400) {
    return Colors.orangeAccent;
  }
  if (_statusCode >= 400 && _statusCode < 500) {
    return Colors.purple;
  }
  if (_statusCode >= 500 && _statusCode < 600) {
    return Colors.red;
  }
  return Colors.blueAccent;
}
/// The method that the [_request] used.
String get _method => _request.method;
/// The [Uri] that the [_request] requested.
Uri get _requestUri => _request.uri;
/// Data for the [_request].
String? get _requestDataBuilder {
  if (_request.data is Map) {
    return _encoder.convert(_request.data);
  }
  return _request.data?.toString();
}
/// Data for the [_response].
String get _responseDataBuilder {
  if (_response.data is Map) {
    return _encoder.convert(_response.data);
  }
  return _response.data.toString();
}

到此今日的网络恳求功用就介绍完了,还是比较简单的,UI相关代码就不介绍了, 如果有不清楚的当地能够自行检查一下源码

结语

好了今日的源码检查就到这了, 作为Flutter届的一个小学生,希望大家多多指教,有问题的当地一同评论