promise封装XMLHttpRequest请求，封装ajax

最新推荐文章于 2024-07-23 10:01:18 发布

haoqi好奇

最新推荐文章于 2024-07-23 10:01:18 发布

阅读量931

点赞数

分类专栏：前端

本文链接：https://blog.csdn.net/qq_41956789/article/details/116143423

版权

前端专栏收录该内容

45 篇文章 1 订阅

订阅专栏

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
	</head>
	<body>
		Promise封装请求
		<script>
			// 序列化参数
			function serialize(data) {
				if (!data) return '';
				var pairs = [];
				for (var name in data) {
					if (!data.hasOwnProperty(name)) continue;
					if (typeof data[name] === 'function') continue;
					var value = data[name].toString();
					name = encodeURIComponent(name);
					value = encodeURIComponent(value);
					pairs.push(name + '=' + value);
				}
				return pairs.join('&');
			}
			// 创 Ajax 请求对象，兼容ie8，ie9
			function XHR() {
				var xObj;
				if (window.XMLHttpRequest) {
					xObj = new XMLHttpRequest();
				} else if (window.ActiveXObjext) {
					xObj = new ActiveXObject();
				}
				return xObj;
			}
			// get封装
			function ajaxForPromise(params) {
				var data = params.data
				var url = params.url
				var method = params.method || 'GET'
				var responseType = params.responseType || 'json'
				return new Promise((resolve, reject) => { // promise封装
					var xhr = XHR();
					var params = null
					xhr.onreadystatechange = handler; 
					if (method.toUpperCase() === 'GET') {
						url = url + '?' + serialize(data);
					} else if (method, toUpperCase() === 'POST') {
						params = serialize(data)
					}
					xhr.open(method, url, true);
					xhr.responseType = responseType
					xhr.send(params);

					function handler() {
						if (this.readyState !== 4) {
							return;
						}
						if (this.status === 200) {
							resolve(this.response) // 正确回调
						} else {
							reject(new Error(this.statusText)); // 错误回调
						}
					}
				})
			}
			// get请求
			let params= {
				data: {
					page: 1,
					pageSize: 10
				},
				url: 'http://www.liulongbin.top:3005/api/getnewslist'
			};
			ajaxForPromise(params).then((res) => {
				console.log(res.message); // 结果
			}).catch(err => {
				console.warn(err)
			})
		</script>
	</body>
</html>