前端开发中，经常会遇到跨域的问题。造成跨域的原因是浏览器安全策略所导致，为了避免网页脚本和其他来源的网页进行恶意操作，浏览器对于跨域访问有一定的限制。而 Promise 是一种异步编程的解决方案，它可以有效地解决跨域请求的问题。
什么是 Promise
Promise 是一种可以异步执行的对象，用于处理异步操作的结果。使用 Promise 可以避免回调地狱，提高代码的可读性和可维护性。Promise 对象有三种状态，分别是 pending（进行中）、fulfilled（已成功）和 rejected（已失败），一旦状态改变，就会触发相应的处理函数。
跨域请求的问题
跨域请求是指当浏览器向服务器发起请求时，该请求的协议、域名、端口号有任意一个与当前页面的协议、域名、端口号不同，浏览器就会产生跨域问题。跨域问题除了常见的 AJAX 请求，还包括图片、视频、样式等资源的加载。
Promise 解决跨域请求问题的实现方式
实现跨域请求，通常有两种解决方案：CORS 和 JSONP。
CORS
CORS（Cross-Origin Resource Sharing）跨域资源共享，其思路是增加一些 HTTP 头部信息来告诉浏览器，允许它访问另一个域上的资源。CORS 请求默认使用 XMLHttpRequest 对象发起。
以使用 JavaScript 发起一次跨域请求为例，代码如下：
const xhr = new XMLHttpRequest()
xhr.addEventListener('load', (event) => {
console.log(event.target.responseText)
})
xhr.open('GET', 'http://localhost:8000/test')
xhr.send()如果服务器支持 CORS，就需要在响应头中加入如下信息：
Access-Control-Allow-Origin: * Access-Control-Allow-Methods: POST, GET, OPTIONS Access-Control-Allow-Headers: Content-Type
JSONP
JSONP（JSON with Padding）是一种跨域解决方案，原理是利用 script 标签没有跨域限制来达到与其他域名间通讯的目的。JSONP 请求一般使用 GET 方法，通过 URL 传递参数，服务器返回的是一段 JavaScript 代码，浏览器执行代码后就可以使用返回的数据。
以使用 JavaScript 发起一次 JSONP 请求为例，代码如下：
-- -------------------- ---- ------- -------- ----- ----- --------- ------ - ----- ------ - -------------------------------- -------------------------- --------------------------------------- --------------------------------- --------------------------------- - ----------------------------------- ----------------- ------------ -------- -------------- ------ - ----------------- -
Promise + JSONP 的实现
JSONP 一般是通过一个回调函数返回数据，但是回调函数是全局变量，不同的业务可能会同时使用相同的回调函数名，存在污染全局变量的风险。为了解决这个问题，可以使用 Promise 对 JSONP 进行封装。
封装后的代码如下：
-- -------------------- ---- -------
-------- ---------------- ----- ------- -
------ --- ----------------- ------- -- -
----- ------------ - ------------------------------
----- ------ - --------------------------------
----- ---- - -------------
----- ------------ - ----------------- ------- - --------- ------------ --
-------------------------- --- - --- - ------------------------
------------ - ----
--- ------------ - ----
-------------------- - ------ -- -
------------ - ----
-
------------------------------- -- -- -
------------------------
------ --------------------
------------ - --------------------- - ---------- --------- -----------
--
-------------------------------- -- -- -
------------------------
------ --------------------
---------- -------------- --------
--
------------------------
--
-使用 Promise 封装后，可以用链式调用的方式进行操作，更加方便。
jsonpWithPromise('http://localhost:8000/test', { name: 'Jonathan' })
.then(data => {
console.log(data)
})
.catch(error => {
console.error(error)
})总结
Promise 是一种非常实用的异步编程解决方案，使用 Promise 可以有效地解决跨域请求的问题，提高代码的可读性和可维护性。在实际开发中，需要遵循浏览器安全策略，采用合适的方式来处理跨域请求。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64635cd7968c7c53b0464769