解决 axios get请求瞎转义问题

在Vue.js项目中，axios 是一个常用的HTTP客户端库，用于发送HTTP请求。qs 是一个用于处理查询字符串的库，通常与 axios 结合使用，特别是在处理POST请求时，将对象序列化为URL编码的字符串。

1. 安装 `axios` 和 `qs`

首先，确保你已经安装了 axios 和 qs：

npm install axios qs

2. 使用 `axios` 和 `qs` 发送请求

在Vue组件中，你可以这样使用 axios 和 qs：

import axios from 'axios';
import qs from 'qs';export default {methods: {async sendRequest() {const data = {username: 'user',password: 'pass'};try {const response = await axios.post('/api/login', qs.stringify(data), {headers: {'Content-Type': 'application/x-www-form-urlencoded'}});console.log(response.data);} catch (error) {console.error(error);}}}
}

3. 配置 `axios` 默认使用 `qs`

如果你希望在所有请求中默认使用 qs，可以在 axios 的全局配置中进行设置：

import axios from 'axios';
import qs from 'qs';axios.defaults.headers.post['Content-Type'] = 'application/x-www-form-urlencoded';
axios.defaults.transformRequest = [function (data) {return qs.stringify(data);
}];export default {methods: {async sendRequest() {const data = {username: 'user',password: 'pass'};try {const response = await axios.post('/api/login', data);console.log(response.data);} catch (error) {console.error(error);}}}
}

4. 处理嵌套对象

qs 默认会将嵌套对象序列化为 key[subkey]=value 的形式。如果你希望使用不同的格式，可以通过 qs 的配置选项进行调整：

const data = {user: {name: 'John',age: 30}
};const queryString = qs.stringify(data, { encode: false, indices: false });
console.log(queryString); // 输出: user.name=John&user.age=30

5. 解析查询字符串

qs 也可以用于解析查询字符串：

const queryString = 'user.name=John&user.age=30';
const parsedData = qs.parse(queryString);
console.log(parsedData); // 输出: { user: { name: 'John', age: '30' } }