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

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

相关推荐
ElasticPDF-新国产PDF编辑器15 小时前
Vue use pdf.js and Elasticpdf tutorial
vue.js·pdf
Billy Qin16 小时前
Tree - Shaking
前端·javascript·vue.js
月明长歌17 小时前
Vue + Axios + Mock.js 全链路实操:从封装到数据模拟的深度解析
前端·javascript·vue.js·elementui·es6
头顶秃成一缕光17 小时前
若依——基于AI+若依框架的实战项目(实战篇(下))
java·前端·vue.js·elementui·aigc
冴羽yayujs17 小时前
SvelteKit 最新中文文档教程(17)—— 仅服务端模块和快照
前端·javascript·vue.js·前端框架·react
海石17 小时前
vue2升级vue3踩坑——【依赖注入】可能成功了,但【依赖注入】成功了不太可能
前端·vue.js·响应式设计
向阳25619 小时前
SpringBoot+vue前后端分离整合sa-token(无cookie登录态 & 详细的登录流程)
java·vue.js·spring boot·后端·sa-token·springboot·登录流程
艾克马斯奎普特19 小时前
Vue.js 3 渐进式实现之响应式系统——第一节:系列开篇与响应式基本实现
vue.js
梅子酱~19 小时前
Vue 学习随笔系列二十二 —— 表格高度自适应
javascript·vue.js·学习