ES6之Promise对象
2024-08-29 18:39:22
创建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运行效果 ( 停用跨域限制 )
最新文章
- JSP+JavaBean+Servlet实现各类列表分页功能
- oracle触发器设置uuid变量
- [zt] Android中使用List列表
- 爬虫6：多页面增量Java爬虫-sina主页
- 分布式环境下限流方案的实现redis RateLimiter Guava,Token Bucket, Leaky Bucket
- Data Base sqlServer DataReader与DataSet的区别
- udp之nat穿透的困惑
- 添加nginx为系统服务(service nginx start/stop/restart)
- Flask web开发 处理POST请求（登录案例）
- 高质量PHP代码的50个实用技巧必备（上）
- WeakHashMap回收时机结合JVM 虚拟机GC的一些理解
- hdu 4283 区间dp
- bootstrap学习一
- Navicat For MySQL--外键建立与cannot add foreign key constraint分析
- Log4j maven依赖配置
- jQuery版本的jsonp
- python 全栈开发，Day26(hashlib文件一致性,configparser,logging,collections模块,deque,OrderedDict)
- (转)Linux top命令的用法详细详解
- CentOS 7 Flannel的安装与配置
- ZOJ2760_How Many Shortest Path