解决axios提交时间类型时区问题,qs.stringify()时区问题

用axios提交时需要qs.stringify()序列化,qs默认的时间格式化为

Date.prototype.toISOString;//返回的是格林威治时间比北京时间晚8小时

需要修改默认日期格式化方法


/*
stringify默认配置
 defaults = {
    delimiter: '&',
    encode: true,
    encoder: utils.encode,
    encodeValuesOnly: false,
    serializeDate: function serializeDate(date) { // eslint-disable-line func-name-matching
        return toISO.call(date);
    },
    skipNulls: false,
    strictNullHandling: false
};

*/
//第一个参数为需要序列化的数据
//第二个参数为配置选项
Qs.stringify(data, {
    serializeDate: (date) => {
        //用moment处理日期比较方便,自己写格式化方法也可以
        return moment(date).format('YYYY-MM-DD HH:mm:ss')
    }
})

 

### 如何在 Vue3 中使用 `qs.stringify` 方法进行参数序列化 为了确保 POST 请求中的数据能够被服务器端正确接收并解析,通常需要将 JavaScript 对象转换为 URL 编码字符串形式。这可以通过 `qs.stringify()` 函数来实现。 #### 安装依赖包 首先安装 qs 库作为项目依赖项: ```bash npm install qs --save ``` #### 配置全局变量以便简化调用过程 为了让组件内部可以直接访问到 `$qs`, 可以考虑将其挂载至 Vue 实例原型上。编辑项目的入口文件 main.js 或者通过插件机制完成配置: ```javascript import { createApp } from 'vue' import App from './App.vue' // 导入 qs 模块 import qs from 'qs' const app = createApp(App) app.config.globalProperties.$qs = qs; app.mount('#app') ``` 这样设置之后,在任何组件实例里都可以方便地通过 `this.$qs` 来获取 qs 的功能支持[^2]。 #### 使用示例 下面是一个简单的例子展示如何利用上述配置发送带有表单编码体的 HTTP POST 请求给 `/api/example` 接口,并指定合适的 Content-Type 头部信息: ```javascript <template> <!-- 组件模板 --> </template> <script setup> import axios from "axios"; async function submitForm(formData){ try { const response = await axios({ method: 'POST', url: '/api/example', headers: {'Content-Type': 'application/x-www-form-urlencoded'}, data: this.$qs.stringify(formData), }); console.log(response.data); } catch (error) { console.error(error.response ? error.response : error.message); } } </script> ``` 在这个例子中,当提交按钮触发时会执行 `submitForm` 函数,它接受一个名为 formData 的对象参数并将之转化为适合于 x-www-form-urlencoded 类型的内容传递出去[^1]。
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值