npm 包 ok-jsonp 使用教程

阅读时长 5 分钟读完

在前端开发中,跨域请求是非常常见的场景。由于浏览器的安全限制,不能直接在页面中跨域请求,因此我们需要使用一些技巧来完成。其中一种技巧就是通过 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

纠错
反馈