应用 Alice inspector 和 Dio 进行 Flutter API 日志记录

前言

有没有发现自己处于这样的状况下，当一个个性被显示或者一个办法被触发时，你必须找出哪个 API 被调用？

我就当你见过了

一种简略的办法是在终端中记录 API 调用。

然而终端很容易变得横七竖八。为了解决这个问题，咱们将应用 Alice 查看器，它将帮忙咱们轻松地记录和无效地共享 API 调用数据。

咱们将应用 Dio 进行 API 调用。

https://pub.dev/packages/dio

注释

首先，咱们将创立一个 Dio helper 类来进行所有 API 调用。

API 助手类

import 'package:connectivity/connectivity.dart';import 'package:dio/dio.dart';import 'package:helpwise/api/interceptor.dart';import 'package:helpwise/my_app.dart';import 'interceptor.dart' as interceptor;class ApiHelper {  ApiHelper() {    setUpOptions();  }  Dio _dio = Dio();  late BaseOptions baseOptions;  setUpOptions() async {    baseOptions = BaseOptions(      baseUrl: 'https://app.helpwise.io/',      connectTimeout: 30000,      receiveTimeout: 30000,      validateStatus: (status) {        return status! < 500;      },    );    _dio = Dio(baseOptions);    _dio.interceptors      ..add(LogInterceptor(requestBody: true))      ..add(        interceptor.Interceptor(          DioConnectivityRequestRetrier(            connectivity: Connectivity(),            dio: _dio,          ),        ),      )      ..add(alice.getDioInterceptor());  }//*GET API CALL  Future<Response> getRequest(String path) async {    try {      final result = await _dio.get(        path,      );      return result;    } catch (e) {      rethrow;    }  }//* POST API CALL  Future<Response> postRequest(    String uri, {    data,  }) async {    try {      Response response = await _dio.post(        uri,        data: data,      );      return response;    } catch (e) {      rethrow;    }  }}

这里有根本 GET，POST api 调用。

在 setUpOptions 中，您将可能看到将拦截器增加到 Dio 对象中。

interceptors 拦截器是什么？

拦截器，因为它意味着拦挡 API 调用。因而，咱们在这里所做的是每次有一个 API 调用时，咱们都要查看无效的令牌，并应用 LogInterceptor ()在终端中进行登录。

第二个拦截器用于查看 Internet 连贯。

第三个拦截器是 Alice 拦截器，它记录所有 API 调用，并在仪表板上显示它们。

接下来，咱们须要在 myApp 类中在 Materials ialApp 之前初始化 Alice

https://pub.dev/packages/flut...

步骤

首先

  • 安装包
// 1. 增加 pubspec.yaml 文件dependencies:  flutter_alice: ^1.0.1// 2. 安装包$ flutter pub get// 3. 导包import 'package:flutter_alice/alice.dart';
  • 应用
// 1. 创立 Alice 实例Alice alice = Alice();// 退出 Add navigator keyMaterialApp( navigatorKey: alice.getNavigatorKey(), home: ...)

此外，为了更平安的生产应用程序显示此日志

Alice alice = Alice(  showNotification: kDebugMode,  showInspectorOnShake:  kDebugMode,darkTheme: true,);

在对象创立期间增加此属性。

成果展现

Wallahhhhh

您将可能在告诉面板中看到日志。

结束语

如果本文对你有帮忙，请转发让更多的敌人浏览。

兴许这个操作只有你 3 秒钟，对我来说是一个激励，感激。

祝你有一个美妙的一天~

© 猫哥

  • 微信 ducafecat
  • https://wiki.ducafecat.tech
  • https://video.ducafecat.tech

本文由mdnice多平台公布