JSON.stringify和JSON.parse的使用？与qs.stringify与qs.parse使用的对比？以及post请求问题

这两天做一个小项目，却被一个参数有对象，数组的post请求卡住了，在大佬的几句金言下，后知后觉还发现了qs与JSON这之间的秘密，为此将总结一下这之间的关系与区别：

JSON.stringify和JSON.parse的使用

这个对于多数的前端来说，这点不算什么，对此了如指掌的可以跳到下个标题；

JSON.stringify()的作用是将 JavaScript 对象转换为 JSON 字符串，而JSON.parse()可以将JSON字符串转为一个对象。

let arr = [1,1,1];
JSON.stringify(arr); // '[1,1,1]'
typeof JSON.stringify(arr); // string

let string = '[1,1,1]';
console.log(JSON.parse(string)) // [1,1,1]
console.log(typeof JSON.parse(string)) // object

注意：JSON.parse()方法必须是字符串，否则会报错

JSON.stringify和JSON.parse的妙用

1.用于localStorage和sessionStorage的存错

localStorage和sessionStorage只能存储字符串的形式，所以可以已字符串的形式存储，取出来再转化成对象的模式

// 存储
    window.localStorage.setItem('key',JSON.stringify(value))

// 查看
    var val = window.localStorage.getItem('key')    consol.log(val)

注：在chrome中，可以在Application查看存储情况

2.用于判断数组对象是否相同

// 判断两个数组对象是否相等
var a = [1,2,3]
var b = [1,2,3]
JSON.stringify(a) === JSON.stringify(b) // true

qs.stringify与qs.parse的使用

qs.parse()将URL解析成对象的形式; qs.stringify()是将对象形式的数据转化成URL的形式；

下载：

在vue项目（已下载node-modules包）中直接引入，无需下载

// 下载
npm install qs

import qs from 'qs'

qs.parse()

let url = 'http://www.taobao.com/cloth?a=1&b=2&c=&d=4';let data = url.split('?')[1]console.log(qs.parse(data))
// {a: "1", b: "2", c: "", d: "4"}

 qs.stringify()

 let obj ={
        a: 1,
        b: 2,
        c: 'mmm'
}
console.log(qs.stringify(obj))
//a=1&b=2&c=mmm

区别JSON.stringify与qs.stringify

let obj ={
   a: 1,
   b: 2,
   c: 'mmm'
}
console.log(qs.stringify(obj))  // a=1&b=2&c=mmm
console.log(JSON.stringify(obj))  // {"a":1,"b":2,"c":"mmm"}

区别JSON.parse与qs.parse

let url = 'http://www.taobao.com/cloth?a=1&b=2&c=&d=4';let data = url.split('?')[1]

console.log(qs.parse(data)) 
// {a: "1", b: "2", c: "", d: "4"}
console.log(JSON.parse(data)) 
// 报错 因为data不是字符串

实战踩坑

故事的开始是这样的，公司正要制作以百度地图为基础的平台，在鹰眼api中测试api，制作demo的我，在这是被这个api拦住了

本以为简简单单的post一下就玩完了，问题出在这个参数，第三个参数是以对象的形式

我的错误示范就不展示了，直接来解决方法：

总结：在使用axios发送post请求中，普遍我们直接使用 qs.stringify(params)提交，但是这个特殊的point_list是一个对象，所以需要先用JSON.stringify将其转化成字符串，在将整个数据qs.stringify提交。

至此，我的踩坑总结就是如此了，希望对各位有所帮助，如有错误，不吝赐教，欢迎指点，不忘点赞！