什么是 JSONP
JSONP（JSON with Padding）是一种跨域请求数据的方式，它通过创建一个 script 标签来实现， script 标签的 src 属性里包含一个回调函数的名称，服务器返回的数据需要被包裹在这个回调函数里，从而让浏览器正常执行。
cross-jsonp 简介
npm 包 cross-jsonp 是一个帮助你轻松实现 JSONP 请求的库，它支持 AMD、CommonJS 和全局引用，可以用于浏览器和 Node.js 环境。使用 cross-jsonp，你可以直接通过一个回调函数来处理异步请求的结果，而无需担心跨域问题。
下面是 cross-jsonp 的基本使用方式：
crossJsonp(url, options, callback)
其中，url 参数为请求的地址（必填），options 参数是一个对象，包括以下属性：
paramName：回调函数的名称，默认为callbacktimeout：设置请求超时的时间（毫秒），默认为 0，即不限制
callback 参数就是回调函数，它接收请求结果作为参数，处理请求结果的业务逻辑都应该放在这里面。
使用 cross-jsonp
我们可以通过以下步骤使用 cross-jsonp。
第一步：在项目中安装 cross-jsonp
npm install cross-jsonp
第二步：引入 cross-jsonp
我们可以直接通过 script 标签或 import 语句来引入 cross-jsonp，下面以 import 为例：
import crossJsonp from 'cross-jsonp'
第三步：使用 cross-jsonp 发送跨域请求
crossJsonp('https://www.example.com/api/getData', {timeout: 3000}, function (data) {
// 处理数据
})示例代码
下面是一个完整的示例代码，它演示了如何使用 cross-jsonp 请求远程数据并处理返回结果：
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
------------------ ------------
------- ---------------------------------------------------------------------------------
-------
------
---- ------------------
--------
------------------------------------------------- --------- ------ -------- ------ -
-- ----
------------------------------------------- - --------------------
--
---------
-------
-------在这个示例代码中，我们向一个远程 API（https://www.example.com/api/getData）发送了一个 JSONP 请求，设置了请求超时时间为 3 秒，请求成功后将返回的数据以 JSON 字符串的形式显示在页面上。
总结
cross-jsonp 是一个简单、轻量的库，可以帮助开发者轻松地发送 JSONP 请求并处理返回结果。同时，它还支持 AMD、CommonJS 和全局引用，适用于各种前端项目。在实际开发中，我们可以使用 cross-jsonp 来完成与后端的跨域数据请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005663681e8991b448e225f