Flutter网络日志打印优化

653 阅读1分钟

最近刚刚开始学习Flutter,在查看网络数据的时候,使用默认的Log拦截器LogInterceptor,发现其打印出来的日志并不理想--全部集中在一行且打印不全。为了解决这些问题,我自定义了一个LogInterceptor

先看一下默认拦截器的日志:

image.png

看习惯了Logger的日志格式的我,表示不能接受,于是打算模仿Logger的格式自定义LogInterceptor

class WanLogInterceptor extends Interceptor {

  static const String TOP_LINE = "┌────────────────────────────────────────────────────────────────────────────────────────────────────────────────";
  static const String START_LINE = "│ ";
  static const String SPLIT_LINE = "|┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄┄";
  static const String END_LINE = "└────────────────────────────────────────────────────────────────────────────────────────────────────────────────";

  @override
  void onRequest(RequestOptions options, RequestInterceptorHandler handler) {
    print(TOP_LINE);
    print(START_LINE + "--> " + options.method + " " + options.uri.toString());
    print(START_LINE + 'responseType: ' + options.responseType.toString());
    print(START_LINE + 'followRedirects: ' + options.followRedirects.toString());
    print(START_LINE + 'connectTimeout: ' + options.connectTimeout.toString());
    print(START_LINE + 'sendTimeout: ' + options.sendTimeout.toString());
    print(START_LINE + 'receiveTimeout: ' + options.receiveTimeout.toString());
    print(START_LINE + 'receiveDataWhenStatusError: ' + options.receiveDataWhenStatusError.toString());
    print(START_LINE + 'extra: ' + options.extra.toString());
    print(START_LINE + "Headers: ");
    options.headers.forEach((name, values) {
      print(START_LINE + "    $name: $values");
    });
    print(END_LINE);
    handler.next(options);
  }

  @override
  void onResponse(Response response, ResponseInterceptorHandler handler) {
    print(TOP_LINE);
    print(START_LINE + "<-- " + response.statusCode.toString() + " " + response.requestOptions.uri.toString());
    print(SPLIT_LINE);
    response.headers.forEach((name, values) {
      print(START_LINE + "$name: $values");
    });
    print(START_LINE + "Response Body:");
    var formatJson = JsonUtils.formatJson(response.toString());
    var splitJson = formatJson.split("\n");
    splitJson.forEach((element) {
      print(START_LINE + element);
    });
    print(END_LINE);
    handler.next(response);
  }
}

对于JSON字符串的格式化

class JsonUtils {

  static const int LEFT_BIG_BRACKET = 123; // "{"
  static const int LEFT_MIDDLE_BRACKET = 91; // "["
  static const int RIGHT_BIG_BRACKET = 125; // "}"
  static const int RIGHT_MIDDLE_BRACKET = 93; // "]"
  static const int COMMA = 44; // ","
  static const String SPACE = "  ";
  static const String WRAP = "\n";

  static void writeSpace(StringBuffer stringBuffer, int writeCount){
    for(int i = 1 ; i <= writeCount ; i++){
      stringBuffer.write(SPACE);
    }
  }

  static String formatJson(String jsonStr) {
    var stringBuffer = StringBuffer();
    var codeUnits = jsonStr.codeUnits;
    var deep = 0;
    for(var i = 0 ; i < codeUnits.length ; i++){
      var unit = codeUnits[i];
      var string = String.fromCharCode(unit);
      switch(unit){
        case LEFT_BIG_BRACKET | LEFT_MIDDLE_BRACKET : {
          deep++;
          stringBuffer.write(string);
          stringBuffer.write(WRAP);
          writeSpace(stringBuffer, deep);
        }
        break;
        case RIGHT_BIG_BRACKET | RIGHT_BIG_BRACKET : {
          deep--;
          stringBuffer.write(WRAP);
          writeSpace(stringBuffer, deep);
          stringBuffer.write(string);
        }
        break;
        case COMMA : {
          stringBuffer.write(string);
          stringBuffer.write(WRAP);
          writeSpace(stringBuffer, deep);
        }
        break;
        default:{
          stringBuffer.write(string);
        }
        break;
      }
    }
    return stringBuffer.toString();
  }
}

输出效果: image.png

到此结束了,写的工具类还没有经过大量的测试,可能存在bug。测试的地址使用的是玩安卓官网的,致谢。