UME: 网络调试

功能查看

今天我们要看下网络调试功能是如何实现的, 老规矩先来看看该功能是什么样的,当我们通过dio进行网络请求后,会记录网络请求的信息,点击cell可以查看请求详情

所以今天分两个部分来看源码 第一部分是通过什么方式来记录每个接口请求数据的,第二个是每个接口的请求数据是如何展示出来的

源码查看

今天查看的代码在flutter_ume_kit_dio中

数据记录

在main.dart中注册时需要传入dio对象,然后给dio添加interceptors,这样在http_interceptor.dart中 就可以重写onRequest、onResponse、onError三个方法,然后把response存入httpContainer中

这时候我们就拿到了所有网络请求的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届的一个小学生,希望大家多多指教,有问题的地方一起讨论