利用Promise封装XMLhttprequest

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

(一)Promise

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

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


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

 (二)利用Promise封装XHR

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

在代码中,我们使用了 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");
	});

我们可以看到我们发送的请求成功了,在控制台中我们将它打印出来了利用Promise封装XMLhttprequest_第1张图片

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

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

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

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

你可能感兴趣的:(前端,javascript,开发语言)