qs的基础

本文介绍了如何在JavaScript环境中使用QS库来解析和序列化URL参数。通过`npm install qs`安装QS,然后在`main.js`中引入并配置全局属性。示例展示了`qs.parse()`用于将URL字符串转换为对象,而`qs.stringify()`则将对象转换回URL查询字符串。这两个方法在处理HTTP请求的查询参数时非常有用。

安装

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

方法

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

// NODE require加载模式
const Qs = require('qs');
let url = 'method=query_sql_dataset_data&projectId=85&appToken=7d22e38e-5717-11e7-907b-a6006ad3dba0';
Qs.parse(url);

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

// NODE require加载模式
const Qs = require('qs');
let obj= {
     method: "query_sql_dataset_data",
     projectId: "85",
     appToken: "7d22e38e-5717-11e7-907b-a6006ad3dba0",
     datasetId: " 12564701"
   };
Qs.stringify(obj);
`qs` 是一个广泛使用的 JavaScript 库,用于**解析和序列化 URL 查询字符串(query string)**。它比原生的 `URLSearchParams` 更强大,尤其在处理嵌套对象、数组等复杂结构时非常有用。 --- ## 📦 什么是 qs? `qs` 全称是 **Query String**,它是一个独立的 npm 包,常用于: - 将 JavaScript 对象转换为 URL 编码格式(`application/x-www-form-urlencoded`) - 解析 URL 查询字符串为 JavaScript 对象 - 支持嵌套对象、数组、重复键等复杂结构 --- ## 📦 安装 ```bash npm install qs ``` --- ## 🧪 使用示例 ### 1. 序列化对象为 URL 编码(常用在 POST 表单请求) ```javascript const qs = require('qs'); const data = { user: { name: 'Alice', age: 25 }, hobbies: ['reading', 'coding'] }; const encoded = qs.stringify(data); console.log(encoded); // 输出: user%5Bname%5D=Alice&user%5Bage%5D=25&hobbies%5B0%5D=reading&hobbies%5B1%5D=coding ``` > 这种格式常用于 `axios` 发送 `x-www-form-urlencoded` 请求。 --- ### 2. 解析 URL 查询字符串为对象 ```javascript const qs = require('qs'); const query = 'user%5Bname%5D=Alice&user%5Bage%5D=25'; const parsed = qs.parse(query); console.log(parsed); // 输出: { user: { name: 'Alice', age: '25' } } ``` --- ### 3. 使用数组索引格式 ```javascript const data = { a: ['b', 'c'] }; const encoded = qs.stringify(data); console.log(encoded); // a%5B0%5D=b&a%5B1%5D=c ``` 你也可以禁用索引: ```javascript const encoded = qs.stringify(data, { arrayFormat: 'repeat' }); console.log(encoded); // a=b&a=c ``` --- ## ⚙️ 常用配置选项 | 选项 | 说明 | 示例 | |------|------|------| | `arrayFormat` | 控制数组的格式化方式(`index`、`brackets`、`repeat`) | `{ arrayFormat: 'repeat' }` | | `encode` | 是否对键和值进行编码 | 默认 `true` | | `skipNulls` | 是否跳过 `null` 或 `undefined` 值 | `{ skipNulls: true }` | | `delimiter` | 自定义分隔符 | `{ delimiter: ';' }` | --- ## 🚀 在 `axios` 中使用 `qs.stringify` 当你需要发送 `application/x-www-form-urlencoded` 类型的 POST 请求时,通常会用 `qs.stringify()` 来格式化数据: ```javascript import axios from 'axios'; import qs from 'qs'; axios.post('/api/login', qs.stringify({ username: 'user1', password: 'pass123' }), { headers: { 'Content-Type': 'application/x-www-form-urlencoded' } }); ``` --- ## ✅ 与 `JSON.stringify` 的区别 | 特性 | `qs.stringify` | `JSON.stringify` | |------|----------------|------------------| | 格式 | `application/x-www-form-urlencoded` | JSON | | 用途 | 表单提交、URL 查询参数 | API 请求体(JSON) | | 嵌套支持 | ✅ 支持 | ✅ 支持 | | 数组索引 | 可配置 | 固定格式 | | 编码 | URL 编码 | 原始 JSON 字符串 | --- ## 🔁 `qs.parse` vs `URLSearchParams` | 特性 | `qs.parse` | `URLSearchParams` | |------|------------|-------------------| | 嵌套支持 | ✅ 强大 | ❌ 不支持 | | 数组支持 | ✅ 可配置 | ✅ 基础支持 | | 易用性 | 更灵活 | 原生 API,较基础 | --- ## ✅ 总结 `qs` 是一个非常强大的 URL 查询字符串处理工具,特别适合: - 处理复杂结构(嵌套对象、数组) - 发送 `x-www-form-urlencoded` 请求 - 解析 URL 查询参数 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值