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);
})