工作原理
Promise是一种处理异步操作的机制，它提供了一种更简洁和可读的方式来处理异步代码。当使用Promise封装AJAX请求时，我们可以将AJAX请求的结果作为Promise对象的解决值或拒绝原因，以便更好地管理和处理请求的结果。
一个Promise对象有三种状态：待定（pending）、已完成（fulfilled）和已拒绝（rejected）。当一个Promise对象处于待定状态时，它可以转换为已完成或已拒绝状态。一旦状态确定，就不可再改变。
语法
以下是使用ES6 Promise封装AJAX请求的基本语法：
代码语言：javascript复制const makeAjaxRequest = (url, method) => {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response); // 请求成功，调用resolve并传递响应数据
} else {
reject(new Error(xhr.statusText)); // 请求失败，调用reject并传递错误信息
}
};
xhr.onerror = () => {
reject(new Error('请求发生错误')); // 请求发生错误，调用reject并传递错误信息
};
xhr.send();
});
};- 创建一个
Promise对象，传入一个执行器函数，该函数接受两个参数resolve和reject。 - 在执行器函数中执行AJAX请求，并根据请求结果调用
resolve或reject。
示例
让我们通过一个示例来理解如何使用ES6 Promise封装AJAX请求。
代码语言：javascript复制const makeAjaxRequest = (url, method) => {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onload = () => {
if (xhr.status >= 200 && xhr.status < 300) {
resolve(xhr.response); // 请求成功，调用resolve并传递响应数据
} else {
reject(new Error(xhr.statusText)); // 请求失败，调用reject并传递错误信息
}
};
xhr.onerror = () => {
reject(new Error('请求发生错误')); // 请求发生错误，调用reject并传递错误信息
};
xhr.send();
});
};
// 使用Promise封装的AJAX请求
makeAjaxRequest('https://api.example.com/data', 'GET')
.then((response) => {
console.log('请求成功，响应数据：', response);
})
.catch((error) => {
console.error('请求失败，错误信息：', error);
});在上面的示例中，我们定义了一个makeAjaxRequest函数，它接受URL和请求方法作为参数，并返回一个Promise对象。在Promise的执行器函数中，我们使用XMLHttpRequest对象执行AJAX请求，并根据请求的结果调用resolve或reject。
然后，我们使用makeAjaxRequest函数发起一个GET请求到https://api.example.com/data。通过调用then()方法，我们可以处理请求成功的情况，并打印响应数据。如果请求过程中发生错误，我们使用catch()方法捕获错误并进行处理，打印错误信息。
