qs外部库和JS内置JSON.stringify/parseqs外部库和JS内置JSON.stringify/parse

qs外部库和JS内置JSON.stringify/parse

qs 是一个用于处理 URL 查询参数的库，主要用于将对象转换为查询字符串，以及将查询字符串解析为对象。在 HTTP 请求中，它通常用于格式化数据，以便于发送给服务器。

import qs from 'qs'

对象转查询字符串 将 JavaScript 对象转换为 URL 查询字符串格式，以便在 GET 请求中发送。例如：

const params = { name: 'John', age: 30 }; 
const queryString = qs.stringify(params); // "name=John&age=30"

查询字符串转对象 将 URL 查询字符串解析为 JavaScript 对象。例如：

const queryString = 'name=John&age=30'; 
const params = qs.parse(queryString); // { name: 'John', age: '30' }

支持嵌套和数组 qs 可以处理嵌套对象和数组的查询参数，可以更好地表示复杂的数据结构。

嵌套对象:

const data = { 
    user: { 
        name: 'John', 
        age: 30 
    }, 
    preferences: { 
        color: 'blue', 
        hobbies: ['reading', 'gaming'] 
    } }; // 转换为查询字符串 
const queryString = qs.stringify(data); console.log(queryString); 
// 输出: "user[name]=John&user[age]=30&preferences[color]=blue&preferences[hobbies][]=reading&preferences[hobbies][]=gaming"

数组：

const dataWithArray = { 
    ids: [1, 2, 3], 
    tags: ['music', 'sports'] 
}; // 转换为查询字符串 
const queryStringWithArray = qs.stringify(dataWithArray);
console.log(queryStringWithArray); 
// 输出: "ids[]=1&ids[]=2&ids[]=3&tags[]=music&tags[]=sports"

使用场景

• 在发送 application/x-www-form-urlencoded 类型的 POST 请求时，常常使用 qs.stringify 来格式化请求体。
• 当需要从 URL 中提取查询参数时，可以使用 qs.parse 方法。

JSON.stringfy()和JSON.parse()

JSON.stringify 和 JSON.parse 是 JavaScript 的内置方法，因此不需要像其他外部库（例如 qs）那样通过 import 语句引入。这些方法是 ECMAScript 规范的一部分，默认情况下在所有 JavaScript 环境中可用，包括浏览器和 Node.js。

• JSON.stringify: 将对象转换为 JSON 字符串，适用于数据存储和传输。
• JSON.parse: 将 JSON 字符串解析为对象，适用于接收和处理外部数据。

用法示例

JSON.stringify 用于将 JavaScript 对象转换为 JSON 字符串。

// 定义一个 JavaScript 对象
const person = {
    name: "Alice",
    age: 30,
    hobbies: ["reading", "travelling"],
    address: {
        city: "New York",
        zip: "10001"
    }
};

// 使用 JSON.stringify 将对象转换为 JSON 字符串
const jsonString = JSON.stringify(person);

console.log(jsonString);
// 输出: {"name":"Alice","age":30,"hobbies":["reading","travelling"],"address":{"city":"New York","zip":"10001"}}

JSON.parse 用于将 JSON 字符串转换回 JavaScript 对象。

// 定义一个 JSON 字符串
const jsonString = '{"name":"Alice","age":30,"hobbies":["reading","travelling"],"address":{"city":"New York","zip":"10001"}}';

// 使用 JSON.parse 将 JSON 字符串转换为 JavaScript 对象
const person = JSON.parse(jsonString);

console.log(person);
// 输出: { name: 'Alice', age: 30, hobbies: [ 'reading', 'travelling' ], address: { city: 'New York', zip: '10001' } }

// 访问对象的属性
console.log(person.name); // 输出: Alice
console.log(person.hobbies[0]); // 输出: reading

JSON.stringify 和 JSON.parse 通常用于将 JavaScript 对象和数组转换为 JSON 字符串，以及将 JSON 字符串转换回 JavaScript 对象。它们在数据存储、网络请求和API交互中非常常见，特别是在前后端数据传递时。

选择依据

• 后端开发者决定要使用哪种格式，根据应用需求和数据使用场景来选择适合的格式。
• 一般来说，JSON 格式更常用，因为它更灵活且易于处理。

如果你在发送请求时指定了 Content-Type: application/json，那么后端通常会返回 JSON 格式的数据。如果你使用的是 application/x-www-form-urlencoded，则有可能得到查询字符串格式的数据。

总结：返回的数据格式是由后端定义的，取决于具体的实现和需求。(也有可能在application/x-www-form-urlencoded时，后端会返回JSON格式)