axios 时间格式和后端不一致

原创

mob64ca12e83232 2024-03-13 05:01:48 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12e83232的原创作品，请联系作者获取转载授权，否则将追究法律责任

解决axios时间格式和后端不一致的问题

在前端开发中，我们经常会使用axios库来发送HTTP请求。然而，当我们发送请求时，经常会遇到一个问题，就是axios库中的时间格式和后端的时间格式不一致，导致数据无法正确传递。在本文中，我将介绍这个问题的背景以及如何解决它。

问题背景

在前端和后端进行数据交互时，经常会涉及到时间数据的传递。前端通常使用JavaScript的Date对象来表示时间，而后端可能使用不同的时间格式来解析和处理时间数据。这就导致了axios发送的时间数据和后端期望接收的时间数据格式不一致的问题。

问题示例

假设我们有一个前端页面，需要向后端发送一个包含时间数据的POST请求。我们使用axios发送请求：

const data = {
  name: 'John Doe',
  birthday: new Date()
};

axios.post('/api/user', data)
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

后端接收到的数据格式可能是ISO 8601格式（如2022-01-01T00:00:00Z），而axios发送的时间数据是JavaScript Date对象。这就导致了后端无法正确解析时间数据，从而导致数据传递失败。

解决方案

为了解决axios时间格式和后端不一致的问题，我们可以通过定义axios的请求拦截器和响应拦截器来统一时间格式。我们可以在请求拦截器中将JavaScript Date对象转换为ISO 8601格式，在响应拦截器中将ISO 8601格式转换为JavaScript Date对象。

axios.interceptors.request.use(config => {
  if (config.data) {
    config.data = JSON.stringify(config.data, (key, value) => {
      if (value instanceof Date) {
        return value.toISOString();
      }
      return value;
    });
  }
  return config;
}, error => {
  return Promise.reject(error);
});

axios.interceptors.response.use(response => {
  if (response.data) {
    response.data = JSON.parse(response.data, (key, value) => {
      if (typeof value === 'string' && /^\d{4}-\d{2}-\d{2}T\d{2}:\d{2}:\d{2}.\d{3}Z$/.test(value)) {
        return new Date(value);
      }
      return value;
    });
  }
  return response;
}, error => {
  return Promise.reject(error);
});

通过定义请求拦截器和响应拦截器，我们可以统一时间数据的格式，确保前端和后端之间可以正确传递时间数据。