本文介绍如何使用 @develephant/jsonp 包来实现前端中跨域请求数据的方法。
什么是 JSONP？
JSONP 是一种通过跨域方式请求数据的简单技术，通过在请求中添加一个回调函数名，服务端将数据作为该函数的参数传递给前端页面。JSONP 的优点是兼容性好，可跨域请求数据。
安装 @develephant/jsonp
npm install @develephant/jsonp
使用 @develephant/jsonp
@develephant/jsonp 封装了 JSONP 请求，使用起来十分简单。下面是一个简单的例子：
-- -------------------- ---- -------
------ ----- ---- --------------------
------------------------------------------------- --- ----- ----- -- -
-- ----- -
--------------------------
- ---- -
-----------------
-
--以上代码会请求 GitHub 上的 develephant 用户信息并在控制台打印返回的数据。
API 参考
jsonp(url, options, callback)
发送 JSONP 请求。
参数
url: String，必填项，请求的 URL 地址。options: Object，选填项，请求的参数，例如：{ timeout: 5000, prefix: '__jp', param: 'callback' }timeout: Number，设置请求超时时间，默认为 60000 毫秒；prefix: String，设置 JSONP 回调函数名的前缀，默认为'__jp'；param: String，设置 JSONP 回调函数名的参数名，默认为'callback'。
callback: Function，必填项，请求成功或失败的回调函数。
返回值
返回一个取消请求的函数。
注意事项
- JSONP 请求需要服务端的支持，服务端需要将数据封装在回调函数中返回；
- JSONP 回调函数名需要与服务端一致；
- JSONP 请求不支持 POST 方法。
总结
通过使用 @develephant/jsonp 包，我们可以在前端中实现跨域请求数据的方法。JSONP 请求是一种简单兼容性好的方案，我们可以通过该技术来请求各种数据并将其展现在页面上。
示例代码
下面是一个完整的示例代码，可以在控制台中查看返回的数据。
-- -------------------- ---- -------
------ ----- ---- --------------------
----- --- - ---------------------------------
----- ------- - -
------ -----------
-------- ----
-
---------- -------- ----- ----- -- -
-- ----- -
--------------------------
- ---- -
-----------------
-
--来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/600556b081e8991b448d37b5