乐趣区

关于程序员:使用-Alice-inspector-和-Dio-进行-Flutter-API-日志记录

jiezi

应用 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 key

MaterialApp(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 多平台公布

退出移动版