美文网首页
【vue-cli】qs插件

【vue-cli】qs插件

作者: 嘻洋洋 | 来源:发表于2021-11-22 17:00 被阅读0次

qs插件是具有一些附加安全性的querystring解析和字符串化库

1. 使用流程

(1)安装
vue-cli项目中安装

    npm install qs

(2)在vue中使用

import qs from 'qs'

http.adornData = (data = {}, openDefultdata = true, contentType = 'json') => {
  var defaults = {
    't': new Date().getTime()
  }
  data = openDefultdata ? merge(defaults, data) : data
  return contentType === 'json' ? JSON.stringify(data) : qs.stringify(data)
}

2. 详细方法介绍

(1)URL解析成对象
qs.parse()
(2)对象序列化成URL的形式,以&进行拼接
qs.stringify()

var a = {name:'hehe',age:10};
 qs.stringify(a)
// 'name=hehe&age=10'
JSON.stringify(a)
// '{"name":"hehe","age":10}'

3. 应用场景

传递参数时,参数形式可以是json的,还有一种参数形式是form-data ,默认情况下,axios将JavaScript对象序列化为JSON。也可以通过headers进行设置:

const http = axios.create({
  timeout: 1000 * 1800,
  withCredentials: true,
  headers: {
    'Content-Type': 'application/json; charset=utf-8'
  }
})

如果要使用form-data格式,可以这样设置:

import qs from 'qs';
const data = { 'bar': 123 };
const options = {
  method: 'POST',
  headers: { 'content-type': 'application/x-www-form-urlencoded' },
  data: qs.stringify(data),
  url,
};
axios(options);

content-type是application/x-www-form-urlencoded,就要使用使qs进行序列化

相关文章

网友评论

      本文标题:【vue-cli】qs插件

      本文链接:https://www.haomeiwen.com/subject/vwaloltx.html