vue中如何读取java 返回的 DataOutputStream.writeFloat() 的数据

在前端中读取后端 Java 返回的 `DataOutputStream.writeFloat()` 的数据，需要使用前后端约定的数据传输格式，常见的有 JSON 和二进制流。

如果后端返回的是 JSON 格式的数据，那么在 Vue 中可以使用 `axios` 库或者 `fetch` API 来发送 HTTP 请求并获取返回的数据。假设后端返回的 JSON 数据格式如下：

{
  "floatValue": 3.1415
}

那么在 Vue 组件中，可以这样读取：

import axios from 'axios'

export default {
  data() {
    return {
      floatValue: null
    }
  },
  mounted() {
    axios.get('/api/floatValue').then(response => {
      this.floatValue = response.data.floatValue
    })
  }
}

如果后端返回的是二进制流格式的数据，可以使用 `fetch` API 并设置 `responseType` 为 `blob`，然后使用 `FileReader` 来读取二进制流数据。假设后端返回的二进制流数据是一个 32 位浮点数，那么在 Vue 组件中可以这样读取：

export default {
  data() {
    return {
      floatValue: null
    }
  },
  mounted() {
    fetch('/api/floatValue', {
      method: 'GET',
      responseType: 'blob'
    }).then(response => {
      return response.blob()
    }).then(blob => {
      const reader = new FileReader()
      reader.addEventListener('loadend', () => {
        const dataView = new DataView(reader.result)
        this.floatValue = dataView.getFloat32(0, true)
      })
      reader.readAsArrayBuffer(blob)
    })
  }
}

需要注意的是，这种方式需要前后端约定好二进制流数据的字节顺序（即大端序还是小端序）。上面的代码中，`getFloat32` 方法的第二个参数为 `true` 表示使用小端序（即字节顺序为低位字节在前，高位字节在后）。如果后端返回的是大端序的数据，需要将第二个参数设置为 `false`。