如何用axios拦截器解决后端接口数据乘以100k的烦恼

前端

2024-01-02 18:15:59

后端接口数据取值乘以100k？如何巧用axios拦截器轻松解决

在最近开发一个电商项目时，我发现后端接口文档中所有与金额相关的字段都标注着"multiply 100k"。经询问后得知，这是为了避免一些精度问题。

精度问题：数据传输中的隐患

在前后端数据传输过程中，小数和大整数可能会出现精度问题。这是因为：

浮点数在计算机中使用有限位数表示，会导致精度损失。
整数虽然没有精度问题，但如果值过大，可能会超过计算机的可表示范围。

multiply 100k：后端的处理方式

为了解决这个问题，后端采取了"multiply 100k"的策略：

将所有金额乘以 100k，转化为整数。
这样，精度问题就转化为单位问题，前端只需除以 100k 即可恢复原值。

axios拦截器：前端的优雅解决方案

虽然后端的处理方式有效，但对于前端来说，每次都要手动除以 100k 并不方便。这时候，我们可以使用axios拦截器来解决这个问题。

axios拦截器是一个允许我们拦截axios请求和响应的机制。我们可以利用它来对金额字段进行处理：

// 创建请求拦截器
axios.interceptors.request.use((config) => {
  // 如果请求中包含金额字段
  if (config.data && config.data.amount) {
    // 将金额除以 100k
    config.data.amount /= 100000;
  }
  return config;
});

// 创建响应拦截器
axios.interceptors.response.use((response) => {
  // 如果响应中包含金额字段
  if (response.data && response.data.amount) {
    // 将金额乘以 100k
    response.data.amount *= 100000;
  }
  return response;
});

通过这两个拦截器，我们可以在发送请求前将金额除以 100k，在接收响应后将金额乘以 100k。这样，前端代码中就可以直接使用原始金额，而无需再进行手动转换。

代码示例

使用axios拦截器处理金额的代码示例如下：

import axios from "axios";

// 创建axios实例
const instance = axios.create();

// 拦截请求
instance.interceptors.request.use((config) => {
  if (config.data && config.data.amount) {
    config.data.amount /= 100000;
  }
  return config;
});

// 拦截响应
instance.interceptors.response.use((response) => {
  if (response.data && response.data.amount) {
    response.data.amount *= 100000;
  }
  return response;
});

// 使用axios实例发送请求
instance.get("/api/orders").then((response) => {
  // 获取订单中的金额，无需手动转换
  const amount = response.data.amount;
});