**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); //后盾人-hdcmsreturn 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);
});