简介
在前端开发中，由于浏览器的同源策略，导致跨域请求时出现限制。然而，经常又需要从不同的域名下获取数据，比如引入第三方 API、前端与后端分离等。为了解决这个问题，就有了 JSONP 这个方案。
JSONP（JSON with Padding）是一种跨域请求的方式，它利用了 script 标签不受同源策略限制的优点，通过动态创建 script 标签，把 JSON 数据以 JavaScript 形式返回，然后再通过回调函数处理获取到的数据。
在这个过程中，需要前后端协同配合，前端发送 JSONP 请求，并在回调函数中处理数据，而后端需要在返回的数据中执行回调函数，从而让前端获取数据。
而 browser-jsonp 这个 npm 包则是针对 JSONP 请求的一个封装，通过简单易用的 API，实现了在浏览器端发起 JSONP 请求和处理回调函数的功能。
安装和使用
首先需要在项目中引入 browser-jsonp 包，你可以使用 npm 安装：
npm install --save browser-jsonp
接着在需要使用的地方引入：
import jsonp from 'browser-jsonp'
然后，就可以通过一下方式发起 JSONP 请求：
jsonp(url, options, callback)
url 表示请求的地址；
options 是一个可选对象，包含以下参数：
param（字符串）：指定回调函数在 url 中的 key，默认为'callback'timeout（数值）：表示请求超时时间prefix（字符串）：表示回调函数的前缀，默认为'__jp'name（字符串）：表示回调函数的名称，如果不传则会随机生成
callback 是 JSONP 请求回调函数，接收两个参数，分别为 error 和 data：
error是可能发生的错误信息，如果没有发生错误则为 nulldata是从后端返回的数据
例如，发起一个获取天气信息的 JSONP 请求：
jsonp('http://api.weather.com.cn/data/sk/101010100.html', function (err, data) {
if (err) {
console.error(err)
} else {
console.log(data)
}
})示例
以下是完整代码示例：
-- -------------------- ---- -------
------ ----- ---- ---------------
--------------------------------------------------------- -
------ -----------
-------- -----
------- -------
----- ----------
-- -------- ----- ----- -
-- ----- -
------------------
- ---- -
-----------------
-
--在这个示例中，我们以获取北京市天气信息为例，发起了一个 JSONP 请求。通过传递 param、timeout、prefix 和 name 等参数，实现了对请求的个性化配置。最终，在回调函数中我们可以处理从后端返回的数据。
总结
browser-jsonp 是一个非常实用的前端工具库，它方便了我们进行 JSONP 跨域请求，并且提供了一系列的参数配置，以便实现个性化调整。通过使用这个库，我们不仅可以更规范地处理跨域请求，还能通过回调函数实现更高层次的前端交互。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066c89ccdc64669dde512d