创建Promise对象
function getHtml(url) {
return new Promise((resolve, reject) => {
let xhr = new XMLHttpRequest();
xhr.open('GET', url);
xhr.onload = () => {
resolve(xhr.responseText);
};
xhr.onerror = () => {
reject(xhr.statusText)
};
xhr.send();
}
);
}
function getTitle(html){
return html.substring(html.indexOf('<title>')+7,html.indexOf('</title>'));
}
执行单个Promise
getHtml('http://www.baidu.com')
.then(
data => {
console.log('[请求成功]' , getTitle(data));
},
status => {
console.log('[请求失败]', status);
}
).catch(e => {
console.log('[异常]', e);
});
Safari运行效果 ( 停用跨域限制 )
执行多个Promise
Promise.all([
getHtml('http://www.baidu.com'),
getHtml('http://www.sogou.com'),
Promise.resolve('Yahoo')
])
.then(
datas => {
console.log('[请求成功]', getTitle(datas[0]));
console.log('[请求成功]', getTitle(datas[1]));
console.log('[请求成功]', datas[2]);
},
status => {
console.log('[请求失败]', status);
}
).catch(e => {
console.log('[异常]', e);
});
Safari运行效果 ( 停用跨域限制 )
链式调用
在then方法的resolve/reject参数中返回Promise对象,实现Promise的链式调用。
getHtml('https://www.baidu.com')
.then(
val=>{
console.log(getTitle(val));
return getHtml('https://www.sogou.com'); // 返回Promise对象
}
).then(
val=>{
console.log(getTitle(val));
return getHtml('https://www.sina.com'); // 返回Promise对象
}
).then(
val=>{
console.log(getTitle(val));
}
).catch(
err=>{
console.log(err);
}
);
Safari运行效果 ( 停用跨域限制 )