在前端开发中，跨域请求是非常常见的场景。由于浏览器的安全限制，不能直接在页面中跨域请求，因此我们需要使用一些技巧来完成。其中一种技巧就是通过 JSONP 来完成跨域请求。
JSONP 是一种非正式的跨域请求技巧，它利用了 script 标签可以跨域请求资源的特点。JSONP 的原理是在页面中动态创建一个 script 标签，src 属性指向跨域请求的地址，并且在该地址后带上一个回调函数名。服务器端在收到请求之后，根据回调函数名返回数据，并将其作为参数传递给该回调函数。页面中的回调函数可以拿到服务器返回的数据并进行处理。
在日常的开发中，我们可能要经常使用到 JSONP 技巧。为了方便开发者使用，npm 社区中出现了许多支持 JSONP 的包。本文将介绍其中一款流行的 JSONP 包 OK-JSONP 的使用方法。
安装 OK-JSONP
使用 npm 命令安装 OK-JSONP：
--- ------- -------- ------
使用 OK-JSONP
引入包：
------ ----- ---- ----------
然后就可以使用 jsonp 函数完成跨域请求了：
---------- ------- - - ------ ---------- -- -------------
url是跨域请求的地址。options是可选的配置参数。param指定回调函数名的参数名，默认为'callback'。timeout指定请求超时时间，默认为60000毫秒。
callbackName是可选的回调函数名，如果不指定将会随机生成一个。
通过 Promise 的方式处理请求成功或失败：
----------
-------------- -- -
------------------------ ---------
--
------------ -- -
--------------------- ------
--完成一个简单的 JSONP 请求示例：
------ ----- ---- ----------
-------------------------------------------- - ------ ---------- --
-------------- -- -
------------------------ ---------
--
------------ -- -
--------------------- ------
--OK-JSONP 的内部实现
了解 OK-JSONP 的内部实现可以帮助我们更好地理解它的使用方式。下面是 OK-JSONP 的核心代码：
------ ------- -------- ---------- ------- - - ------ ---------- -- ------------- -
------ --- ----------------- ------- -- -
----- ------ - --------------------------------
----- -------- - ------------ -- ---------------------
----- ----- - ------------- -- ----------
----- ------- - --------------- -- -----
--- ---------
---------- - -------------------------- - --- - -------------------------
------------ - ----
---------------- - ---------- -- -
-----------------------
---------------------------------
------ ----------------
-----------------
-
--------- - ------------- -- -
---------- ------------ ------- -- ------ ----- ------
---------------------------------
------ ----------------
-- --------
---------------------------------
--
-OK-JSONP 的核心实现代码比较简单，主要是动态生成 script 标签，将跨域地址作为 script 标签的 src 属性，并且将回调函数名作为参数赋值给指定的参数名，最后将 script 标签添加到页面中。在脚本运行过程中，如果成功获取到数据，就将数据传递给回调函数处理，并在回调函数中将 script 标签从页面中移除，同时清除超时计时器和全局作用域中的回调函数；如果在超时时间内未能成功获取数据，则拒绝 Promise 并将 script 标签从页面中移除，同时清除超时计时器和全局作用域中的回调函数。
小结
OK-JSONP 是一个简单易用的 JSONP 库，在实际开发中，使用它可以方便地完成跨域请求任务。了解 OK-JSONP 的内部实现可以帮助我们更好地理解它的使用方式。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/600558a081e8991b448d5ede