在使用axios
向后端异步发送时间类型(date
)数据的时候,遇到了时间参数自动转换时区的问题。
如上图所示,通过时间组件选定时间之后,打印出了时间。
但是,在数据向后端传输的时候,通过 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.json
和package-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
的日志输出:
如上图所示,我们选定的两个时间分别为2019-07-21 00:00:00
和2019-07-31 00:00:00
:
最后,我们在来观察Network
里面显示的实际传输的值,显然两者相同。至此,问题解决!
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。
原创声明:本文系作者授权腾讯云开发者社区发表,未经许可,不得转载。
如有侵权,请联系 cloudcommunity@tencent.com 删除。