在前端开发中，我们经常需要使用 Ajax 来获取数据，而 Promise 又是一种异步编程的标准解决方案。本文将介绍如何手写 Promise Ajax，并对它的实现原理进行详细解析，希望能给需要的开发者提供一些帮助。
Promise 简介
Promise 是一种异步编程的解决方案，它可以通过链式调用的方式优雅地解决回调地狱的问题。它的核心是一个状态机，包含三个状态：Pending、Fulfilled 和 Rejected。
- Pending：初始状态，既不是成功也不是失败状态。
- Fulfilled：意味着操作成功完成。
- Rejected：意味着操作失败。
Promise 可以通过 then 方法获取操作成功和失败的结果。then 方法接受两个参数，第一个参数是成功的回调，第二个参数是失败的回调。
以下是一个简单的 Promise 例子：
// javascriptcn.com 代码示例
const promise = new Promise((resolve, reject) => {
setTimeout(() => {
const randomNum = Math.random()
if (randomNum > 0.5) {
resolve('操作成功')
} else {
reject('操作失败')
}
}, 1000)
})
promise.then((result) => {
console.log(result)
}, (error) => {
console.log(error)
})Ajax 简介
Ajax（Asynchronous JavaScript and XML），即异步 JavaScript 和 XML，是一种在不重新加载整个页面的情况下，通过后台发送请求更新部分页面的技术。Ajax 技术通常用于获取服务器上的数据，然后在客户端进行动态更新。在实际的开发中，我们经常使用 jQuery 或者 axios 等第三方库来完成 Ajax 请求，这里我们尝试手写一个 Promise 版本的 Ajax。
我们将实现一个简单的 Ajax 方法，它接受三个参数：请求地址、请求方式和请求参数。这个方法会返回一个 Promise，我们可以使用 then 方法获取接口数据或者抛出异常。
以下是代码实现：
// javascriptcn.com 代码示例
function ajax(url, method = 'GET', data = null) {
return new Promise((resolve, reject) => {
const xhr = new XMLHttpRequest();
xhr.open(method, url);
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200 || xhr.status === 304) {
resolve(xhr.responseText);
} else {
reject(xhr.statusText);
}
}
};
xhr.onerror = function() {
reject(xhr.statusText);
};
xhr.send(data);
});
}
// 请求百度首页
ajax('https://www.baidu.com')
.then((res) => {
console.log(res)
})
.catch((err) => {
console.log(err)
})实现原理解析
上述代码实现可分为以下几个部分：
- 创建 XMLHttpRequest 对象
- 使用 open 方法设置请求方式和请求地址
- 监听 readyState 状态变化
- 监听错误事件
- 发送请求
首先我们通过 new XMLHttpRequest() 的方式创建一个 XMLHttpRequest 对象，这个对象可以用来向服务器发送请求和接收服务器的响应。然后我们使用 open 方法来设置请求方式和请求地址，并设置请求头。
在监听函数中，我们判断 readyState 的状态是否为 4（已经接收到全部响应数据），如果是，则判断 HTTP 状态码是否为 200 或 304。如果是成功的状态，我们则通过 resolve 方法将接口返回值返回出去；如果是失败的状态，我们则通过 reject 方法将错误信息返回出去。
代码中还有一个错误监听事件，当请求失败时，我们可以通过 xhr.statusText 获取错误信息，然后将错误信息通过 reject 方法抛出，供后续处理。
最后我们使用 send 方法发送请求。
总结
在本文中，我们手写了一个 Promise 版本的 Ajax 方法，并对实现原理进行了详细的解析和说明。这个方法可以方便地通过链式调用方式获取数据或者抛出异常，避免了回调地狱的问题。对于需要频繁使用 Ajax 的开发者，手写一个 Promise Ajax 是一件非常有必要的事情。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654dc0e57d4982a6eb726a33