以 Promise 驯服异步之兽：跨域 Ajax 的优雅处理

2023-10-07 04:41:52

跨域 Ajax 的挑战

在 Web 开发中，Ajax（Asynchronous JavaScript and XML）是一种用于实现异步通信的技术。它允许浏览器在不重新加载整个页面的情况下与服务器交换数据。然而，当您尝试使用 Ajax 从不同域名或端口的服务器请求数据时，就会遇到跨域限制。

跨域限制是为了保护用户数据安全而设计的。如果没有这些限制，恶意网站可以轻松访问其他网站的敏感数据，从而导致安全漏洞。因此，浏览器会阻止跨域 Ajax 请求，除非服务器明确允许。

Promise 的闪亮登场

Promise 是一种 JavaScript 对象，它表示一个异步操作的最终完成或失败状态。它为异步编程提供了统一的接口，让开发者可以更轻松地处理异步操作的结果。

Promise 的工作原理如下：

创建一个 Promise 对象，并传入一个函数作为参数。
在函数内部，执行异步操作。
当异步操作完成或失败时，调用 Promise 对象的 resolve() 或 reject() 方法。
您可以使用 then() 方法来处理 Promise 的结果。如果异步操作成功完成，则 then() 方法的第一个参数会收到结果。如果异步操作失败，则 then() 方法的第二个参数会收到错误信息。

跨域 Ajax 与 Promise 的完美结合

现在，让我们将 Promise 应用到跨域 Ajax 请求中。以下是如何使用 Promise 来发送跨域 Ajax 请求的步骤：

创建一个新的 Promise 对象。
在 Promise 对象的构造函数中，传入一个函数作为参数。
在函数内部，使用 XMLHttpRequest (XHR) 对象发送跨域 Ajax 请求。
当 XHR 请求完成或失败时，调用 Promise 对象的 resolve() 或 reject() 方法。
使用 then() 方法来处理 Promise 的结果。如果请求成功完成，则 then() 方法的第一个参数会收到服务器返回的数据。如果请求失败，则 then() 方法的第二个参数会收到错误信息。

示例代码

以下是一个使用 Promise 来发送跨域 Ajax 请求的示例代码：

function getCrossDomainData() {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', 'https://example.com/api/data');
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(xhr.response);
      } else {
        reject(xhr.statusText);
      }
    };
    xhr.onerror = () => {
      reject(xhr.statusText);
    };
    xhr.send();
  });
}

getCrossDomainData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error(error);
  });