解决 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' } }

总结

• axios 是一个强大的HTTP客户端库，适用于发送各种HTTP请求。
• qs 是一个处理查询字符串的库，特别适合与 axios 结合使用，尤其是在处理POST请求时。
• 你可以通过全局配置或局部配置来使用 qs，并且可以根据需要调整序列化和解析的行为。

希望这些信息对你有帮助！如果你有更多问题，欢迎继续提问。