巧用Promise封装AJAX，解锁前端面试新姿势

前端

2023-10-18 01:31:52

AJAX与Promise的基本认识

AJAX，全称是Asynchronous JavaScript and XML。它允许您在不重新加载页面的情况下与服务器进行数据交换。这使得AJAX成为构建动态和交互式网页的强大工具。

Promise是JavaScript中用于处理异步操作的API。它提供了一种简单而有效的方式来处理异步操作的回调函数，从而简化了代码的编写和维护。

手写AJAX

手写AJAX需要使用XMLHttpRequest对象来创建HTTP请求。以下是步骤：

创建一个XMLHttpRequest对象
打开一个HTTP请求
设置请求头
发送请求
等待服务器响应
解析服务器响应

使用Promise封装AJAX

为了简化AJAX操作，我们可以使用Promise来封装AJAX请求。以下是步骤：

创建一个Promise对象
在Promise对象中使用XMLHttpRequest对象来创建HTTP请求
在HTTP请求成功后，调用Promise对象的resolve方法
在HTTP请求失败后，调用Promise对象的reject方法

廖雪峰封装AJAX的方式

廖雪峰在《JavaScript教程》中提供了一种使用Promise封装AJAX的方式。这种方式使用fetch API来进行HTTP请求，并使用Promise来处理异步操作。以下是步骤：

使用fetch API发送HTTP请求
使用then方法来处理HTTP请求的成功响应
使用catch方法来处理HTTP请求的失败响应

AJAX代码示例

以下是一个完整的AJAX代码示例，演示了如何使用XMLHttpRequest对象和Promise来封装AJAX请求：

function ajax(url, method, data) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.setRequestHeader('Content-Type', 'application/json');
    xhr.onload = () => {
      if (xhr.status >= 200 && xhr.status < 300) {
        resolve(xhr.response);
      } else {
        reject(xhr.statusText);
      }
    };
    xhr.onerror = () => {
      reject(xhr.statusText);
    };
    xhr.send(JSON.stringify(data));
  });
}

ajax('https://example.com/api/users', 'GET').then(data => {
  console.log(data);
}).catch(error => {
  console.error(error);
});