为什么后端接口返回数字类型1.00前端会取到1？

news2025/3/26 21:04:35

这得从axios中得默认值说起：

Axios 的 `transformResponse`

axios 在接收到服务器的响应后，会通过一系列的转换函数（transformResponse）来处理响应数据，使其适合在应用程序中使用。默认情况下，axios 的 transformResponse 包含以下步骤：

解析 JSON 数据：使用 JSON.parse 将响应的 JSON 字符串转换为 JavaScript 对象。
转换数据：根据响应的 Content-Type，可能进行其他转换（如将 XML 转换为对象）。
返回数据：最终返回处理后的数据供应用程序使用。

默认的 `transformResponse`

// node_modules/axios/lib/defaults.js
const defaults = {
  // 其他默认配置...
  transformResponse: [function transformResponse(data) {
    // 对 data 进行任意转换处理
    if (typeof data === 'string') {
      try {
        data = JSON.parse(data);
      } catch (e) { /* 忽略解析错误 */ }
    }
    return data;
  }],
  // 其他默认配置...
};

在这个过程中，JSON.parse 将 JSON 字符串转换为 JavaScript 对象。然而，JavaScript 的 Number 类型在处理某些数字时会自动去除不必要的尾随零，例如将 12.00 转换为 12。

为什么 `JSON.parse` 会舍去小数点后的零？

是因为 JSON.parse 将数字字符串解析为 JavaScript 的 Number 类型。在 JavaScript 中，12.00 和 12 被认为是相等的数值，因此 JSON.parse 会自动优化表示方式，去掉不必要的尾随零。这是 JavaScript 的预期行为，但在某些需要保留特定小数位数的场景下，这可能会导致问题。

解决方案-------------------------------------

1. 后端返回字符串类型的数据

最直接的方法是让后端在返回JSON数据时，将需要保留小数位数的数字字段作为字符串返回。这样，前端接收到的数据将保留原始的小数点后零。

后端示例（以Java为例）：

public class ResponseData {
    @JsonFormat(shape = JsonFormat.Shape.STRING)
    private String number;

    // getters and setters
}

返回的JSON：

{
  "number": "12.00"
}

前端处理：

axios.get('/api/your-api').then(response => {
  const numberString = response.data.number; // "12.00"
  const number = parseFloat(numberString); // 如果需要数值类型，可以转换
  const formattedNumber = number.toFixed(2); // "12.00"
});

2. 自定义`transformResponse`

如果无法修改后端返回的数据格式，可以在axios的配置中自定义transformResponse，在数据被解析为JavaScript对象之前，对特定字段进行处理，确保数字以字符串形式保留小数点后的零。

示例代码：

import axios from 'axios';

const axiosInstance = axios.create({
  transformResponse: [
    function (data) {
      let parsedData;
      try {
        parsedData = JSON.parse(data, (key, value) => {
          if (typeof value === 'number' && Number.isFinite(value)) {
            return value.toFixed(2);
          }
          return value;
        });
      } catch (e) {
        return data;
      }
      return parsedData;
    }
  ],
});

axiosInstance.get('/api/your-api').then(response => {
  console.log(response.data); // 数字字段将以字符串形式保留两位小数
});

3. 在前端手动处理数字格式

如果后端返回的数字是数值类型，且你只需要在前端展示时保留小数点后的零，可以在渲染时进行格式化，而不改变原始数据。

示例代码（Vue.js）：

<template>
  <div>
    格式化后的数字: {{ formattedNumber }}
  </div>
</template>

<script>
export default {
  data() {
    return {
      number: 12.00 // 假设这是从后端获取的数字
    };
  },
  computed: {
    formattedNumber() {
      return this.number.toFixed(2); // "12.00"
    }
  }
};
</script>

4. 使用字符串处理库

如果需要更复杂的数字格式化，可以使用第三方库如numeral.js或accounting.js来处理数字格式。

使用numeral.js的示例：

npm install numeral

import axios from 'axios';
import numeral from 'numeral';

axios.get('/api/your-api').then(response => {
  const number = response.data.number; // 假设是数值类型 12
  const formattedNumber = numeral(number).format('0.00'); // "12.00"
  console.log(formattedNumber);
});