XMLHttpRequest（XHR）是一种常用的交互方式，它可以在不刷新页面的情况下，向服务器发送请求并获取数据，实现异步通信。但是，在使用 XHR 时，我们常常需要写大量的回调函数来处理请求和响应的结果，代码量急剧增加，逻辑变得混乱难以维护。这时，Promise 就可以起到很好的封装作用。

(一)Promise

Promise 是 JavaScript 中一种常用的处理异步操作的方式，它可以将异步操作封装成一个 Promise 对象，并提供 then 方法为操作成功时的回调函数和 catch 方法为操作失败时的回调函数，并且它能很好的避免了回调地狱的风险，使代码更加方便阅读。

这是Promise的一个简单使用方法，我们这里利用定时器来模拟，定义一个随机数，判断随机数是否大于0.5，大于即返回成功，小于即返回失败

<script>
	let promise = new Promise((res, err) => {
		setTimeout(() => {
			let num = Math.random();
			console.log(num)
			if (num > 0.5) {
				res("成功");
			} else {
				err("失败");
			}
		}, 1000);
	});

	promise.then(res => {
		console.log(res+"我是res");
	}).catch(err => {
		console.log(err+"我是err");
	});
</script>

使用 Promise 需要执行 new Promise() 来创建一个 Promise 对象。而 Promise 有两个参数resolve 和 reject，分别用于处理异步成功和失败的情况。(这里习惯性写的res,err),这里可以看到随机数为0.33几是小于0.5的返回了失败，调用了catch方法。

 (二)利用Promise封装XHR

封装XHR，使其返回一个Promise对象，更好的方便我们进行异步操作。

<script>
	function request(method, url) {
		return new Promise((res, err) => {
			const xhr = new XMLHttpRequest();
			xhr.open(method, url, true);
			xhr.onreadystatechange = function() {
				if (xhr.readyState === 4) {
					if (xhr.status === 200) {
						res(xhr.responseText);
					} else {
						err(xhr.statusText);
					}
				}
			};
			xhr.onerror = function() {
				err(xhr.statusText);
			};
			xhr.send();
		});
	}
</script>

在代码中，我们使用了 Promise 的构造函数，将 XMLHttpRequest 封装成一个 Promise 对象，并在其中加入了异步请求的逻辑。当请求成功时，将调用 res() 方法，将请求的结果传递给下一个 then() 方法；当请求失败时，将调用 err() 方法，将错误信息传递给下一个 catch() 方法。

现在我们调用方法

request('GET', 'https://localhost:44335/api/Home/text')
	.then(res => {
		console.log(res+"我是res");
	})
	.catch(err => {
		console.log(err+"我是err");
	});

我们可以看到我们发送的请求成功了，在控制台中我们将它打印出来了

那么调用失败是什么样子的呢，是不是调用.catch方法 ，这里我将后端连接关闭了。

这里我们可以看到他打印的是”我是err“并且还有报错提醒 。由此可见我们使用Promise调用时失败会回调catch方法。

有需要了解XHR的可以看一下这一篇

https://blog.csdn.net/qq_58159494/article/details/132679939