【uniapp原生】实时记录接口请求延迟，并生成&写入文件到安卓设备

在开发实时数据监控应用时，记录接口请求的延迟对于性能分析和用户体验优化至关重要。本文将基于 UniApp 框架，介绍如何实现一个实时记录接口请求延迟的功能，并深入解析相关代码的实现细节。

前期准备&必要的理解

1. 功能概述

该功能的核心在于定时发送网络请求，记录请求的延迟时间，并将延迟数据实时写入本地文件。以下是主要步骤：

1. 定时发送请求：使用 setInterval 每秒发送一次网络请求。
2. 记录延迟时间：通过记录请求发送前后的时间差，计算网络延迟。
3. 写入本地文件：将延迟数据以 JSON 或 TXT 格式追加写入本地文件，以便后续分析。

2. 关键代码解析

写入APP.vue中的关键代码片段：

export default {
  data() {
    return {
      intervalId: null, // 用于存储定时器的ID
    };
  },
  computed: {
    carCode() {
      return this.$store.state.carCode;
    },
  },
    onShow() {
    let isLogin = uni.getStorageSync("isLogin");
    console.log("App Show", isLogin);
    // 息屏开启后--重启轮询
    if (isLogin == "yes") {
      this.$store.dispatch("restartPolling");
    } else {
      this.$store.dispatch("stopPolling");
    }
    // 启动定时器，每秒执行一次网络延迟检测
    this.intervalId = setInterval(() => {
      this.checkNetworkLatency();
    }, 1000);
  },
  onHide() {
    console.log("App Hide");
    this.$store.dispatch("stopPolling");

    if (this.intervalId) {
      clearInterval(this.intervalId);
      this.intervalId = null;
    }
  },
  onUnload() {
    clearInterval(this.timer);
    this.$store.dispatch("stopPolling");
  },
  methods: {
    // 创建空文件（仅在 APP-PLUS 环境下有效）
    createEmptyFile(fileNamePath) {
      const File = plus.android.importClass("java.io.File");
      try {
        const file = new File(fileNamePath);
        if (file.exists()) {
          file.delete();
          console.log("已删除现有文件");
        }
        file.createNewFile();
        console.log("空文件创建成功");
        return true;
      } catch (e) {
        console.error("创建文件失败:", e);
        return false;
      }
    },
    // 追加数据到文件（仅在 APP-PLUS 环境下有效）
    appendToFile(data, fileNamePath) {
      const File = plus.android.importClass("java.io.File");
      const FileOutputStream = plus.android.importClass("java.io.FileOutputStream");
      const OutputStreamWriter = plus.android.importClass("java.io.OutputStreamWriter");
      const BufferedWriter = plus.android.importClass("java.io.BufferedWriter");

      try {
        const file = new File(fileNamePath);
        const fos = new FileOutputStream(file, true); // true 表示追加模式
        const osw = new OutputStreamWriter(fos);
        const bw = new BufferedWriter(osw);

        const line = JSON.stringify(data) + "\n";
        bw.write(line);

        bw.close();
        osw.close();
        fos.close();
        return true;
      } catch (e) {
        console.error("写入文件失败:", e);
        return false;
      }
    },
    // 网络延迟检测函数
    checkNetworkLatency() {
      const startTime = new Date().getTime();
      const url = "/logistics/bulletinBoard/getWeather/440700";

      uni.request({
        url: url,
        method: "GET",
        success: (res) => {
          const latency = new Date().getTime() - startTime;

          const data = {
            dataTime: res.data.timestamp,
            networkLatency: `${latency} ms`,
            carCode: this.carCode,
          };

          // 仅在 APP-PLUS 环境下写入文件
          // #ifdef APP-PLUS
          this.appendToFile(data, "/storage/emulated/0/Download/networkLatency.text");
          // #endif

          this.networkLatency = `${latency} ms`;
        },
        fail: (error) => {
          console.error("网络请求失败:", error);
          this.networkLatency = "检测失败";
        },
      });
    },
  },
};

3. 详细说明

1. 定时器初始化：

   • 在 mounted 生命周期钩子中，初始化 USB 设备连接（如果需要）。
   • 在 onShow 生命周期钩子中，启动定时器，每秒调用一次 checkNetworkLatency 函数。

2. 网络延迟检测：

   • checkNetworkLatency 函数首先记录当前时间 startTime。
   • 使用 uni.request 发送 GET 请求到指定的 URL。
   • 在请求成功的回调中，计算延迟时间 latency。
   • 将延迟数据封装成对象 data，并通过 appendToFile 方法将其追加写入本地文件。
   • 更新组件中的 networkLatency 数据，以便在界面上实时显示。

3. 文件操作：

   • createEmptyFile 方法用于在指定路径创建空文件。如果文件已存在，则先删除再创建。
   • appendToFile 方法用于将数据以 JSON 格式追加写入文件。使用 BufferedWriter 可以提高写入效率。

4. 生命周期管理：

   • 在 onHide 和 onUnload 生命周期钩子中，清除定时器，停止轮询，并停止轮询操作。这有助于节省资源，避免不必要的网络请求。

4. 优化建议

1. 错误处理：

   • 在文件操作和网络请求中添加更多的错误处理逻辑，确保应用的稳定性。例如，处理文件写入失败、网络请求超时等情况。

2. 性能优化：

   • 考虑使用节流（throttling）或防抖（debouncing）技术，避免在高频率的网络请求中频繁写入文件。
   • 可以在内存中缓存一定量的延迟数据，然后批量写入文件，减少磁盘 I/O 操作。

3. 数据可视化：

   • 为了更直观地展示延迟数据，可以在界面上添加图表或统计信息。例如，使用图表库（如 ECharts）实时绘制延迟趋势图。

4. 数据存储：

   • 除了写入本地文件，还可以考虑使用本地数据库（如 SQLite）来存储延迟数据，以便更高效地查询和管理。

5. 权限管理：

   • 确保应用具有写入存储的权限，特别是在 Android 平台上，需要在 manifest 文件中声明相关权限，并在运行时请求用户授权。

5. 总结

通过以上步骤，您可以在 UniApp 应用中实现一个实时记录接口请求延迟的功能。这不仅有助于监控应用的性能，还能为后续的优化提供数据支持。根据具体需求，您可以进一步扩展和优化该功能，例如增加数据持久化、集成图表展示等。

希望本文对您有所帮助，祝您开发顺利！