在前端开发中，跨域请求是一个常见的问题。Jsonp（JSON with Padding）是一种解决跨域请求的方案，它借助 script 标签实现数据传输。Npm 包 jsonp 可以方便地实现 Jsonp 请求，本文将详细介绍 jsonp 的使用方法。
安装
在使用 jsonp 之前，需要先安装它。可以通过 npm 命令进行安装：
npm install jsonp
使用方法
使用 jsonp 主要包括两个步骤：构造请求 URL 和发送请求。
构造请求 URL
Jsonp 请求是通过添加一个回调函数来实现的，因此，首先需要定义一个回调函数。假设我们定义了一个名为 handleResponse 的回调函数，那么构造请求 URL 的代码如下：
const url = 'http://example.com/api?param1=value1&callback=handleResponse';
其中，url 是请求的地址，callback 参数指定了回调函数的名称。
发送请求
构造好 URL 后，就可以发送请求了。使用 jsonp 的代码如下：
-- -------------------- ---- -------
------ ----- ---- --------
---------- ----- ----- ----- -- -
-- ----- -
-------------------
- ---- -
------------------
-
---这段代码使用 import 语句引入了 jsonp 模块，并调用了 jsonp 函数。jsonp 函数接收三个参数：
- url：请求的地址。
- options：可选参数，用于指定 jsonp 请求的一些设置，比如超时时间、前缀等。
- callback：回调函数，用于处理返回的数据。
在回调函数中，如果出现错误，可以通过 err 参数获取错误信息；否则，返回的数据将被传递给 data 参数。
示例代码
下面是一个完整的示例代码，使用了百度地图 API 实现了关键词搜索功能：
-- -------------------- ---- -------
------ ----- ---- --------
----- ------ - --------- -- -
----- --- - -------------------------------------------------------------------------------------------------------------------------------------
---------- ----- ----- ----- -- -
-- ----- -
-------------------
- ---- -
--------------------------
-
---
--
-------------上面的代码中，search 函数接收一个关键词作为参数，构造了一个带有回调函数的 URL，然后使用 jsonp 发送请求。当返回数据时，打印结果列表到控制台。
总结
通过本文的介绍，我们学习了 npm 包 jsonp 的使用方法，并通过实例代码演示了如何使用 jsonp 进行跨域请求。对于需要实现 Jsonp 请求的开发者来说，这是一个非常实用的工具。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/44031