在前端开发中,跨域请求是非常常见的场景。由于浏览器的安全限制,不能直接在页面中跨域请求,因此我们需要使用一些技巧来完成。其中一种技巧就是通过 JSONP 来完成跨域请求。
JSONP 是一种非正式的跨域请求技巧,它利用了 script 标签可以跨域请求资源的特点。JSONP 的原理是在页面中动态创建一个 script 标签,src 属性指向跨域请求的地址,并且在该地址后带上一个回调函数名。服务器端在收到请求之后,根据回调函数名返回数据,并将其作为参数传递给该回调函数。页面中的回调函数可以拿到服务器返回的数据并进行处理。
在日常的开发中,我们可能要经常使用到 JSONP 技巧。为了方便开发者使用,npm 社区中出现了许多支持 JSONP 的包。本文将介绍其中一款流行的 JSONP 包 OK-JSONP 的使用方法。
安装 OK-JSONP
使用 npm 命令安装 OK-JSONP:
npm install ok-jsonp --save
使用 OK-JSONP
引入包:
import jsonp from 'ok-jsonp'
然后就可以使用 jsonp 函数完成跨域请求了:
jsonp(url, options = { param: 'callback' }, callbackName)
url
是跨域请求的地址。options
是可选的配置参数。param
指定回调函数名的参数名,默认为'callback'
。timeout
指定请求超时时间,默认为60000
毫秒。
callbackName
是可选的回调函数名,如果不指定将会随机生成一个。
通过 Promise 的方式处理请求成功或失败:
jsonp(url) .then(response => { console.log('response:', response) }) .catch(error => { console.log('error:', error) })
完成一个简单的 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