promise封装XMLHttpRequest请求，封装ajax

清疚 2023-01-16 14:21 183阅读 0赞

<!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>