解决 axios get请求瞎转义问题

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

1. 安装 axiosqs

首先,确保你已经安装了 axiosqs

bash 复制代码
npm install axios qs

2. 使用 axiosqs 发送请求

在Vue组件中,你可以这样使用 axiosqs

javascript 复制代码
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 的全局配置中进行设置:

javascript 复制代码
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 的配置选项进行调整:

javascript 复制代码
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 也可以用于解析查询字符串:

javascript 复制代码
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,并且可以根据需要调整序列化和解析的行为。

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

相关推荐
vvilkim6 分钟前
React 与 Vue 虚拟 DOM 实现原理深度对比:从理论到实践
前端·vue.js·react.js
三原2 小时前
2025 乾坤(qiankun)和 Vue3 最佳实践(提供模版)
vue.js·架构·前端框架
DC...3 小时前
vue滑块组件设计与实现
前端·javascript·vue.js
H5开发新纪元3 小时前
Vite 项目打包分析完整指南:从配置到优化
前端·vue.js
吃面必吃蒜4 小时前
从 Vue 到 React:React 合成事件
javascript·vue.js·react.js
前端练习生5 小时前
vue2如何二次封装表单控件如input, select等
前端·javascript·vue.js
不爱说话郭德纲5 小时前
Vue scoped都用过吧,它是怎么实现样式隔离的?React又是怎么实现的
前端·javascript·vue.js
OpenTiny社区5 小时前
直播预告|TinyVue 组件库高级用法:定制你的企业级UI体系
前端·vue.js·开源
Cyann6 小时前
vue3实战项目第一日(学习项目):封装svg全局组件
vue.js
2501_915373886 小时前
vue之事件绑定
前端·javascript·vue.js