vue拦截器qs

朱雀 2022-11-01 13:49 181阅读 0赞

# 一、概述 #

## 什么是qs ##

qs是一个流行的查询参数序列化和解析库。可以将一个普通的object序列化成一个查询字符串，或者反过来将一个查询字符串解析成一个object,帮助我们查询字符串解析和序列化字符串。

## vue中qs安装使用 ##

打开控制台输入：npm install qs  
在main.js中导入qs插件：import qs from 'qs'  
在main.js中配置全局属性：Vue.prototype.$qs = qs

## 方法 ##

## qs.parse() ##

qs.parse()是将URL解析成对象的形式

const str = "username='admin'&password='admin'" 
    console.log(qs.parse(str)) // Object { username: "admin", password: "admin" }

## qs.stringify() ##

qs.stringify()是将对象 序列化成URL的形式，以&进行拼接

qs.stringify({username:'admin', password:'admin'})
    //username=admin&password=admin

# 二、参数处理 #

## 一般参数 ##

await this.$axios({
              method: 'post',
              url: url,
              data: this.$qs.stringify(params),  // 将js对象转换成字符串格式
            })

## 数组参数 ##

注意：对于数组参数，不能使用一般参数的形式。

比如原参数

{
         "id":3,"title":"python 开发实战","price":"98.60","pub_date":"2020-05-05","publish":"中国青年出版社","authors":[2]}

传给后端接收时，会变成

{
         'id': ['3'], 'title': ['python 开发实战'], 'price': ['98.60'], 'pub_date': ['2020-05-05'], 'publish': ['中国青年出版社'], 'authors[0]': ['2']}

**发现问题没有，后端接收authors时，变成了authors\[0\]，显然是不能接受的。**

怎么解决呢？

await this.$axios({
              method: 'post',
              url: url,
              data: this.$qs.stringify(params,{arrayFormat: 'repeat', allowDots: true})
            })

说明：

arrayFormat 可以格式化数组参数，有3种形式，这里选择repeat就可以了。

allowDots 启用点表是法

例如：

let data = 'a.b=c';
    qs.parse(data,{allowDots:true});//{a:{b:'c'}}

增加2个参数后，后端接收，就正常了，比如：

{
         'id': ['3'], 'title': ['python 开发实战'], 'price': ['98.60'], 'pub_date': ['2020-05-05'], 'publish': ['中国青年出版社'], 'authors': ['2']}

本文参考链接：

[https://www.pianshen.com/article/46821345921/][https_www.pianshen.com_article_46821345921]

[http://www.manongjc.com/detail/17-icboyofmvshsgwz.html][http_www.manongjc.com_detail_17-icboyofmvshsgwz.html]

[https_www.pianshen.com_article_46821345921]: https://www.pianshen.com/article/46821345921/
[http_www.manongjc.com_detail_17-icboyofmvshsgwz.html]: http://www.manongjc.com/detail/17-icboyofmvshsgwz.html