**1.链式操作**
1).每个then都是一个promise
2).如果then返回promise,只当promise结束后,才会继续执行下一个then
1.1 语法介绍
then 会返回一个promise ,所以如果有多个then 时会连续执行
then 返回的值会做为当前promise 的结果
下面是链式操作的 then,即始没有 return 也是会执行,因为每个then 会返回promise,没有return的时候最后的打印结果为undefined-houdunren。
new Promise((resolve, reject) => {
resolve("后盾人");
})
.then(hd => {
hd += "-hdcms";
console.log(hd); //后盾人-hdcms
return hd;
})
.then(hd => {
hd += "-houdunren";
console.log(hd); //后盾人-hdcms-houdunren
});
1.2 操作元素
then 方法可以返回一个promise 对象,等promise 执行结束后,才会继承执行后面的 then。后面的then 方法就是对新返回的promise 状态的处理。
new Promise((resolve,reject)=>{
resolve('第一个promise');
}).then(msg=>{
console.log(msg);
return new Promise((resolve,reject)=>{
setTimeout(() => {
resolve('第二个promise')
}, 3000);
})
}).then(msg=>{
console.log(msg);
})
下面使用 promise 对元素事件进行处理
<body>
<div>
<h2>第九章 闭包与作用域</h2>
<button>收藏课程</button>
</div>
</body>
<script>
new Promise(resolve => {
document.querySelector("button").addEventListener("click", e => {
resolve();
});
})
.then(() => {
return new Promise(resolve => {
setTimeout(() => {
console.log("执行收藏任务");
resolve();
}, 2000);
});
})
.then(() => {
return new Promise(resolve => {
setTimeout(() => {
console.log("更新积分");
resolve();
}, 2000);
});
})
.then(() => {
console.log("收藏成功!奖励10积分");
})
.catch(error => console.log(errro));
2.扩展接口
resolve
使用promise.resolve 方法可以快速的返回一个promise对象
Promise.resolve("后盾人").then(
value => {
console.log(value); //后盾人
});
reject
Promise.reject("fail").catch(error => console.log(error));
下面使用 Project.reject 设置状态
new Promise(resolve => {
resolve("后盾人");
})
.then(v => {
if (v != "houdunren.com") return Promise.reject(new Error("fail"));
})
.catch(error => {
console.log(error);
});
all
使用Promise.all 方法可以同时执行多个并行异步操作,比如页面加载时同进获取课程列表与推荐课程。
1.任何一个 Promise 执行失败就会调用 catch方法
2.适用于一次发送多个异步操作
3.参数必须是可迭代类型,如Array/Set
4.成功后返回 promise 结果的有序数组
下例中当 hdcms、houdunren 两个 Promise 状态都为 fulfilled 时,hd状态才为fulfilled。
const hdcms = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("第一个Promise");
}, 1000);
});
const houdunren = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("第二个异步");
}, 1000);
});
const hd = Promise.all([hdcms, houdunren])
.then(results => {
console.log(results);
})
.catch(msg => {
console.log(msg);
});
如果某一个promise没有catch 处理,将使用promise.all 的catch处理
let p1 = new Promise((resolve, reject) => {
resolve("fulfilled");
});
let p2 = new Promise((resolve, reject) => {
reject("rejected");
});
Promise.all([p1, p2]).catch(reason => {
console.log(reason);
});
allSettled
allSettled 用于处理多个promise ,只关注执行完成,不关注是否全部执行成功,allSettled 状态只会是fulfilled。
下面的p2 返回状态为 rejected ,但promise.allSettled 不关心,它始终将状态设置为 fulfilled 。
const p1 = new Promise((resolve, reject) => {
resolve("resolved");
});
const p2 = new Promise((resolve, reject) => {
reject("rejected");
});
Promise.allSettled([p1, p2])
.then(msg => {
console.log(msg);
})
race
使用Promise.race() 处理容错异步 ,哪个Promise快用哪个,哪个先返回用哪个。
1.以最快返回的promise为准.
2.如果最快返加的状态为rejected 那整个promise为rejected执行cache
3.如果参数不是promise,内部将自动转为promise
下面将第一次请求的异步时间调整为两秒,这时第二个先返回就用第二人。
const hdcms = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("第一个Promise");
}, 2000);
});
const houdunren = new Promise((resolve, reject) => {
setTimeout(() => {
resolve("第二个异步");
}, 1000);
});
Promise.race([hdcms, houdunren])
.then(results => {
console.log(results);//第二个异步
})
.catch(msg => {
console.log(msg);
});