封装AJAX库及采用Promise解决回调地狱原理

promise介绍

promise是Es6提供的一个内置类,目的是解决AJAX的串行和并行的,解决回调地狱问题

安装live-server

本地写了一个html的demo页面,需要在服务器中启动才能看见效果,比如发送ajax请求;为了快速在服务器中查看页面,就需要安装live-server插件,但是默认启动的是IE浏览器,需要搜下如何配置

自己封装一个类似Jquery的AJAX库

// 参数序列化:把一个对象变为x-www-form-urlencoded格式 "xxx=xxx&xxx=xxx"
// QS类库:qs.stringify 实现的就是这个功能  qs.parse 正好相反 ...
function paramsSerialize(obj) {
	if (!obj || typeof obj !== "object") return obj;
	let result = ``;
	for (let key in obj) {
		if (!obj.hasOwnProperty(key)) break;
		result += `&${key}=${obj[key]}`;
	}
	result = result.substring(1);
	return result;
}

function ajax(options) {
	// init params
	options = Object.assign({
		url: '',
		method: 'get',
		params: null,
		data: null,
		success: Function.prototype
	}, options);

	// params serialize
	options.params ? options.params = paramsSerialize(options.params) : null;
	options.data ? options.data = paramsSerialize(options.data) : null;

	let isGET = /^(GET|DELETE|HEAD|OPTIONS)$/i.test(options.method);
	if (isGET && options.params) {
		options.url += `${options.url.indexOf('?') >= 0 ? '&' : '?'}${options.params}`;
	}

	// send ajax
	let xhr = new XMLHttpRequest;
	xhr.open(options.method, options.url);
	!isGET ? xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded') : null;
	xhr.onreadystatechange = function () {
		let {
			status,
			readyState,
			responseText
		} = xhr;
		if (/^2\d{2}$/.test(status) && readyState === 4) {
			// 获取服务器响应主体信息
			responseText = JSON.parse(responseText);
			options.success && options.success(responseText);
		}
	};
	xhr.send(isGET ? null : options.data);
}
ajax({
    url: '',
    method: 'get',
    params: {
        name: '',
        age: 12
    },
    // post请求,请求主体
    data: {
        sex: 'xx'
    },
    // 成功之后触发succes回调函数
    success: function () {

    }
})

AJAX的并行

AJAX的串行

// 在AJAX串行中,基于回调函数方式处理,会导致很恶心的回调地狱问题
/* ajax({
	url: 'http://127.0.0.1:8888/user/login',
	method: 'post',
	data: {
		account: 'ss',
		password: 'e807f1fcf82d132f9bb018ca6738a19f' //1234567890的MD5加密结果
	},
	success(result) {
		console.log('登录结果信息===>', result);
		if (result.code == 0) {
			// 已经登录,再去获取权限信息
			ajax({
				url: 'http://127.0.0.1:8888/user/power',
				success(result) {
					console.log('权限信息===>', result);
					// 拥有查看全部客户的权限
					ajax({
						url: 'http://127.0.0.1:8888/customer/list',
						params: {
							lx: 'all'
						},
						success(result) {
							console.log('客户信息===>', result);
						}
					});
				}
			});
		}
	}
}); */

promise解决AJAX串行,避免回调地狱

function userLogin() {
	return new Promise(resolve => {
		ajax({
			url: 'http://127.0.0.1:8888/user/login',
			method: 'post',
			data: {
				account: 'ee',
				password: 'e807f1fcf82d132f9bb018ca6738a19f'
			},
			success: resolve
		});
	});
}

function getPower() {
	return new Promise(resolve => {
		ajax({
			url: 'http://127.0.0.1:8888/user/power',
			success: resolve
		});
	});
}

function getCustom() {
	return new Promise(resolve => {
		ajax({
			url: 'http://127.0.0.1:8888/customer/list',
			params: {
				lx: 'all'
			},
			success: resolve
		});
	});
}
userLogin().then(result => {
	console.log('登录结果信息===>', result);
	return getPower();
}).then(result => {
	console.log('权限结果信息===>', result);
	return getCustom();
}).then(result => {
	console.log('客户结果信息===>', result);
})
  • 0
    点赞
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值