vue之请求中的qs

前言

在使用axios请求时，在拦截器中对data进行转换

qs简介

qs 是一个增加了一些安全性的查询字符串解析和序列化字符串的库。可以进行对象与字符串之间的一个转换。是axios中自带的，也可以单独安装使用

相关链接

qs官方链接和具体用法

安装

npm install qs

引用

import qs from 'qs'

main.js中引用

Vue.prototype.$qs = qs

应用场景

在请求拦截器中使用对请求的data进行进行序列化转化

instance.interceptors.request.use(
  (config) => {
    const token = store.getters['user/token']
    if (token) config.headers['Authorization'] = `Bearer ${token}`
    if (
      config.data &&
      config.headers['Content-Type'] ===
        'xxxx/xxxx;charset=UTF-8'
    )
      config.data = qs.stringify(config.data)
    if (debounce.some((item) => config.url.includes(item)))
      loadingInstance = gp.$baseLoading()
    return config
  },
  (error) => {
    return Promise.reject(error)
  }
)

qs使用

介绍它的两个方法：stringify和parse。

qs.stringify(data)详细用法请参考qs官方链接和具体用法

是将对象序列化成url形式的字符串，以&符号进行拼接。

const userObj = {name:'xiaomi',password:'123'}
qs.stringify(userObj)
console.log('转换前的格式：',userObj)
console.log('转换后的格式：',qs.stringify(userObj)
 
// 转换前的格式：{name:'xiaomi',password:'123'}
// 转换后的格式：name=xiaomi&password=123

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'

qs.parse(data)详细用法请参考qs官方链接和具体用法

是将URL形式的字符串解析成对象

import qs from 'qs'
 
const userStr = 'name=xiaomi&password=123'
console.log('转换后的格式：',qs.parse(userStr))
 
// Object{
//    name:'xiaomi',
//    password:'123'
// }