前言
在前端开发中，我们经常需要获取第三方接口数据，而 jsonp 就是一种跨域请求的解决方案。micro-jsonp 是一个小型的 jsonp 库，通过它我们可以方便地使用 jsonp 请求数据。本文将详细介绍 npm 包 micro-jsonp 的使用方法。
什么是 micro-jsonp
micro-jsonp 是一个小巧、简单的 jsonp 库。它只有一个 js 文件，体积仅有 0.5kb，支持 AMD、CommonJS 和基本的全局引用方式，非常适合各种类型的前端项目。
micro-jsonp 的使用方法
安装 micro-jsonp
micro-jsonp 可以通过 npm 安装，也可以直接下载 js 文件。在本教程中，我们将采用 npm 安装的方式。
npm install micro-jsonp
使用 micro-jsonp
- 引入 micro-jsonp
import jsonp from "micro-jsonp";
- 调用 jsonp 方法请求数据
jsonp(url, options, callback);
- url：请求的链接地址。
- options：请求参数对象。
- callback：请求成功后的回调函数。
示例代码：
-- -------------------- ---- -------
------ ----- ---- --------------
-------------------------------------------- - -------- ---- -- ----- ----- -- -
-- ----- -
-------------------- -----
- ---- -
-------------------- ------
-
---micro-jsonp 的深入解析
jsonp 的实现原理
在同源策略的限制下，浏览器不允许 XMLHttpRequest 发送跨域请求。跨域请求的实现方式有多种，其中比较常用的一种是 jsonp。
jsonp 的实现原理是通过创建 script 标签，将带有回调函数名的 url 注入到 script 的 src 属性中，服务器在接收到该请求之后，会将数据包装成一个函数调用返回，函数名为 url 中指定的回调函数名，服务端返回的数据就会作为回调函数的参数被调用。
micro-jsonp 的实现原理
micro-jsonp 就是基于 jsonp 实现的。它处理了 jsonp 请求的大部分细节，将请求的 url、参数、回调函数封装成了一个对象，方便我们调用。
代码实现的核心是通过 Promise 对象封装 jsonp 请求。具体实现过程如下：
- 在 Promise 的构造函数中，创建 script 标签，给 script 标签的 src 赋值为 jsonp 请求链接，参数会带上回调函数名。
- 在全局注册 window 对象的回调函数，回调函数的名字就是上一步设置的回调函数名。
- 在 script 标签的 onload 和 onerror 事件中，移除 script 标签，如果请求成功则 resolve，否则 reject。
下面是 micro-jsonp 的核心代码：
-- -------------------- ---- -------
-------- ---------- ------- - --- -
------ --- ----------------- ------- -- -
----- -
------------ - -----------
------- - -----
------ - ---
------------- - ---------------------
- - --------
----- ----- - ------------- -- -
---------- ------------ ------- -- - - --- - - ----- -------
-- ---------
----- ------ - ---------------------------------
----- --------- - --- -----------------------------------
----- ------------- - --- - --- - --------- - --- - ------------ - --- - --------------
---------- - --------------
-------- --------- -
-- ------------------- --------------------------------------
------ ----------------------
--------------------
-
--------------------- - ------ -- -
----------
--------------
--
-------------- - -- -- -
----------
---------- ------------ ------- -- - - --- - - ----------
--
----------------------------------
---
-总结
本文详细介绍了 npm 包 micro-jsonp 的使用方法，并对 jsonp 的实现原理进行了简单的解析。micro-jsonp 是一个小巧、简单的 jsonp 库，能够大大简化我们的 jsonp 请求操作。希望本文可以对大家有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/60066f481d8e776d08041119