前言
在前端开发中，Ajax 是异步请求的基础，但有些情况下需要使用 jsonp 进行跨域请求。jsonp（JSON with Padding）是一个非正式的协议，是 JSON 的一种“使用模式”，可以让页面从其他域名下获取 JSON 数据，但是它不支持对异步请求的处理。在这种情况下，Promise 出现了。本文将详细介绍如何使用 Promise 处理 jsonp 异步请求问题。
什么是 jsonp
JSONP 是 JSON with Padding 的简称，它是一种解决跨域的方案。JSONP 的实现方式是通过在客户端动态创建 script 标签，将回调函数名作为参数传递给服务端，服务器将函数名和数据作为响应返回，在客户端自动执行响应的函数。由于 script 标签的跨域特性，因此可以更便捷地进行跨域请求，但是不能通过 XMLHttpRequest 对象进行操作。
下面是一个简单的 jsonp 请求示例：
function handleData(data) {
console.log(data);
}
const script = document.createElement('script');
script.src = 'http://example.com/api?callback=handleData';
document.body.appendChild(script);在这个例子中，我们创建了一个名为 handleData 的函数来处理响应数据，然后创建一个新的 script 元素，并指定回调函数的参数名为 callback。当服务器返回响应时，它将包含函数的调用，该函数是由客户端传递给服务器的。
对于使用 jsonp 的异步请求，我们可以将其封装成 Promise，从而更方便地进行处理。
封装
我们可以将 jsonp 请求封装成一个 Promise 对象，进行链式操作：
-- -------------------- ---- -------
-------- ---------- ------------- -
------ --- ----------------- ------- -- -
----- ---------------- - ------------------------
------------------------ - ---- -- -
------ -------------------------
----------------------------------
--------------
--
----- ------ - ---------------------------------
---------- - --------------------------------------
-------------- - -------
----------------------------------
---
-这里定义了一个函数 jsonp，接收两个参数：需要请求的 url 和回调函数名。返回一个 Promise 对象，对箭头函数 resolve、reject 进行处理，在创建 script 标签后添加到页面中。如果出错，调用 reject 函数。
使用
使用封装好的 jsonp 实现异步请求时，与使用 Ajax 的方式类似，只需调用 then 方法即可。
jsonp('http://example.com/api', 'handleData')
.then(data => {
console.log(data);
})
.catch(error => {
console.error(error);
});总结
本文详细介绍了如何使用 Promise 处理 jsonp 异步请求问题。首先介绍了 jsonp 是什么以及其工作原理，然后利用 Promise 封装 jsonp，最后通过一个简单的示例演示了如何使用封装后的 jsonp 进行异步请求。希望读者能够通过本文对 jsonp 原理和 Promise 的使用有更深入的理解。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6464ca43968c7c53b05a4e11