对json 与jsonp的理解-优快云博客

本文链接：https://blog.youkuaiyun.com/qq_39894133/article/details/79202314

本文介绍了JSON的基础概念及其在JavaScript中的应用，包括JSON的转换方法如stringify与parse。此外，还探讨了JSONP作为一种跨域数据交互方式的工作原理，并提供了一个简单的JSONP封装示例。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

一，json在js中是对象和数组，常用的json就是将json转换成字符串，字符串转换成对象。 json是一种数据交换的文本格式，目的是取代繁重的xml

json常用Api： json.stringify({a:10,b:20}); //json转换成字符串 json.parse('{"a":10,"b":20}')

//字符串转换成json 推荐文章：http://blog.youkuaiyun.com/qq_32528231/article/details/52783210

JSON(JavaScript Object Notation) 是一种轻量级的数据交换格式。它是基于JavaScript的一个子集。数据格式简单, 易于读写, 占用带宽小。

{"age":"12", "name":"back"}

二，jsonp是为了便于客户端使用数据，逐渐形成的一种非正式传输协议，人民将它称为jsonp，该协议的要点就是允许用户传递一个callback的参数给服务端，然后服务端返回数据时将这个callback参数作为函数名来包裹json数据，这样客户端就可以随意的定制自己的函数来自动处理返回数据了。

jsonp('http://www.example.com/foo', null, function (err, data) {
if (err) {
console.error(err.message);
} else {
console.log(data);
}
});

三，如何封装一个jsop呢

import originJSONP from 'jsonp'

export default function jsonp(url, data, option) {
url += (url.indexOf('?') < 0 ? '?' : '&') + param(data)

   return new Promise((resolve, reject) => {
       originJSONP(url,option, (err, data) => {
           if(!err) {
               resolve(data)
           }else{
               reject(err)
           }
       })
   })
}

function param(data) {
   let url = ''
   for (var k in data) {
       let value = data[k] !== undefined ? data[k] : ''
       url += '&${k}=${encodeURIComponent(value)}'
   }
   return url ? url.substring(1) : ''
}