解决 axios 提交时间类型参数遇到的时区自动转换问题

问题描述

在使用axios向后端异步发送时间类型(date)数据的时候,遇到了时间参数自动转换时区的问题。

console-log
如上图所示,通过时间组件选定时间之后,打印出了时间。

inspect-network

但是,在数据向后端传输的时候,通过 Chrome 浏览器的Inspect功能,查看Network,发现时间参数被自动修改了,我们选定的时间是2019-07-12 00:00:00,在传输的时候却被修改为2019-07-11 16:00:00,导致时间传到后端的参数值与我们期望的参数值不一致,两者相差 8 个小时,也就是从东 8 区(中国北京)的时间自动转换到 0 时区(格林威治)的时间。前端与后端交互的代码,如下所示:

handleSelectCondition(startDate, endDate) {
    this.axios
        .post('/notify/history/select/byCondition', {
            startDate: startDate,
            endDate: endDate
        })
        .then(response => {
            console.log('response: ' + response)
        })
        .catch(error => console.warn(error))
        .finally(() => (this.loading = false))
}

解决方法

为了解决时区自动转换的问题,我们使用moment组件,在传输参数之前,先对参数进行格式化。如果我们还没有安装moment组件,则需要先安装moment组件,其命令为:

npm install --save moment

执行成功后,其会自动在package.jsonpackage-lock.json这两个文件中添加对moment组件的依赖,类似:

<!-- package.json -->
"dependencies": {
    "moment": "^2.24.0"
}

<!-- package-lock.json -->
"moment": {
      "version": "2.24.0",
      "resolved": "https://registry.npmjs.org/moment/-/moment-2.24.0.tgz",
      "integrity": "sha512-bV7f+6l2QigeB*SM/6y87A8e7*/34/2ky5Vw4B9*dQg=="
}

安装完成moment组件,修改前端与后端交互的代码:

handleSelectCondition(startDate, endDate) {

	const moment = require('moment')

    const startDateStr = moment(startDate).format('YYYY-MM-DD HH:mm:ss')
    const endDateStr = moment(endDate).format('YYYY-MM-DD HH:mm:ss')
    
    this.axios
        .post('/notify/history/select/byCondition', {
            startDate: startDateStr,
            endDate: endDateStr
        })
        .then(response => {
            console.log('response: ' + response)
        })
        .catch(error => console.warn(error))
        .finally(() => (this.loading = false))
}

对比修改前与修改后的代码可见,在通过axios向后端传输时间类型的参数前,我们先对其进行了格式化操作:

const moment = require('moment')

const startDateStr = moment(startDate).format('YYYY-MM-DD HH:mm:ss')
const endDateStr = moment(endDate).format('YYYY-MM-DD HH:mm:ss')

修改后,进行测试,观察console.log的日志输出:

console-log-2

如上图所示,我们选定的两个时间分别为2019-07-21 00:00:002019-07-31 00:00:00

inspect-network-2
最后,我们在来观察Network里面显示的实际传输的值,显然两者相同。至此,问题解决!

已标记关键词 清除标记
-------------------数据库类型: ![图片说明](https://img-ask.csdn.net/upload/201910/16/1571223118_551006.png) -------------------通过sql语句在数据库中打印: ![图片说明](https://img-ask.csdn.net/upload/201910/16/1571223178_178273.png) -------------------后台迭代打印: ![图片说明](https://img-ask.csdn.net/upload/201910/16/1571223272_752092.png) --------------------通过axios传入前端: ![图片说明](https://img-ask.csdn.net/upload/201910/16/1571223346_497175.png) 最先的时候我是使用获取row数据然后在前台转换的方法: ``` <el-table-column :formatter="dateFormat" prop="chcCreateDate" label="创建日期" min-width="100"></el-table-column> <script> methods:{ query:function(){ this.axios.post(url, params).then(resp => { //这边值已经绑定到table中了 }).catch(error => { console.log(error); }), //行中:formatter调用的就是这个方法 dateFormat(row, column) { var moment = require('moment'); var date = row[column.property]; return moment(date).format("YYYY-MM-DD HH:mm:ss") } } } </script> ``` 在随后的两个页面中也可以使用这种方法,但是到了现在我把一个vue中的行数据绑定到另外一个vue中去了,然后因为这边这个vue不需要query方法了, 直接是传值的了。所以创建日期这一栏又变成没用方法之前了,想过再次调用这个方法,但是感觉是我在页面上传参的方法传过去的已经是一个时间戳了,也已经不能通过table中获取行再来改变时间类型了,求一个解决方法
©️2020 CSDN 皮肤主题: 代码科技 设计师:Amelia_0503 返回首页
实付 9.90元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、C币套餐、付费专栏及课程。

余额充值