vue中的qs

1.什么是qs：

qs是axios自带的一个库

目的是为了增强axios请求查询中的字符串解析和序列化字符串的安全性。可以将对象和字符串进行相互转换。

2.安装：

npm install qs

3.Vue项目中的导入：

import qs from 'qs'

4.场景

axios中调用接口时使用

// 创建axios实例
const service = axios.create({
  baseURL: process.env.VUE_APP_API, // api 的 base_url
  timeout: 10000 // 请求超时时间
})

service.defaults.headers.common['Content-Type'] = 'application/json'

// request拦截器
service.interceptors.request.use(
  config => {
    // param参数序列化
    config.paramsSerializer = params => qs.stringify(params, { arrayFormat: 'repeat' })

    return config
  },
)

5.qs的使用

• qs.stringify(data)
  • 将对象序列化成url形式的字符串，以&符号进行拼接

const userObj = {name:'xiaoming',password:'123123'}
console.log('转换后的格式：',qs.stringify(userObj)

// 转换后的格式：name=xiaoming&password=123123

• qs.parse(data)
  • 将URL形式的字符串解析成对象

const userStr = 'name=xiaoming&password=123456'
console.log(qs.parse(userStr))

//Object{
//    name:'xiaoming',
//    password:'123456'
// }

6.格式化数组arrayFormat

处理数组有三种方式：

qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'indices' })
// 'a[0]=b&a[1]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'brackets' })
// 'a[]=b&a[]=c'
qs.stringify({ a: ['b', 'c'] }, { arrayFormat: 'repeat' })   默认
// 'a=b&a=c'   默认

默认arrayFormat就等于repeat

config.paramsSerializer = params => qs.stringify(params, { arrayFormat: 'repeat' })
等同于
config.paramsSerializer = params => qs.stringify(params)