<html>
|
<head>
|
<title>Promise</title>
|
<script type='text/javascript'>
|
//1.链式回调 通过多次调用 then() 可以添加多个回调函数，它们会按照插入顺序进行执行。
|
const doSomething = () => new Promise((resolve,reject)=>{setTimeout(() => {
|
console.log("在setTimeout中做了些事");
|
reject();
|
}, 10);});
|
const successCallBack = () => {
|
console.log("成功的回调");
|
};
|
const successCallBack1 = () => new Promise((resolve,reject)=>{setTimeout(() => {
|
console.log("成功的回调1");
|
reject();
|
}, 10);});
|
const failureCallBack = () => {
|
console.log("失败的回调");
|
};
|
//返回Promise对象，输出"在setTimeout中做了些事"文本，但是没有执行reject回调。
|
const promise = doSomething();
|
//执行promise对象的reject回调failureCallBack()，输出“失败的回调”文本，返回promise2对象，由于failureCallBack()方法中没有手动创建Promise所以这里返回的是默认的Promise对象
|
const promise2 = promise.then(successCallBack,failureCallBack);
|
//执行promise2默认回调successCallBack(),返回默认对象promise3
|
const promise3 = promise2.then(successCallBack,failureCallBack);
|
//简写
|
doSomething().then(successCallBack,failureCallBack).then(successCallBack,failureCallBack);
|
//successCallBack1返回用户自己创建的Promise，并且指定了回调函数
|
doSomething().then(successCallBack,failureCallBack).then(successCallBack,failureCallBack).then(successCallBack1,failureCallBack).then(successCallBack,failureCallBack);
|
|
//.catch()、finally()
|
const promise4 = new Promise((resolve,reject)=>{setTimeout(() => {
|
console.log("promise4：在setTimeout中做了些事");
|
console.log("选择路径[A]");
|
resolve("路径：A0");
|
//reject("路径：A1");
|
},10)})
|
.then(resolvePara => new Promise((resolve2,reject2) => {
|
console.log("promise4 then1：成功的回调");
|
throw new Error("是错误哦");
|
console.log(resolvePara);
|
console.log("选择路径[B]");
|
resolve2(resolvePara + " B0");
|
//reject2(resolvePara + " B1");
|
}), rejectPara => new Promise((resolve2,reject2) => {
|
console.log("promise4 then1：失败的回调");
|
console.log(rejectPara);
|
console.log("选择路径[B]");
|
resolve2(resolvePara + " B0");
|
//reject2(resolvePara + " B1");
|
}))
|
.then(resolvePara => new Promise((resolve3,reject3) => {
|
console.log("promise4 then1 then2：成功的回调");
|
console.log(resolvePara);
|
console.log("选择路径[C]");
|
resolve3(resolvePara + " C0");
|
//reject3(resolvePara + " C1");
|
}), rejectPara => new Promise((resolve3,reject3) => {
|
console.log("promise4 then1 then2：失败的回调");
|
console.log(rejectPara);
|
console.log("选择路径[C]");
|
resolve3(resolvePara + " C0");
|
//reject3(resolvePara + " C1");
|
}))
|
.catch(rejectPara => {
|
console.log("promise4 catch：异常的回调");
|
console.log(rejectPara);
|
})
|
.finally(() => {
|
console.log("promise4 finally：执行完毕");
|
})
|
//通常，一遇到异常抛出，浏览器就会顺着 Promise 链寻找下一个 onRejected 失败回调函数或者由 .catch() 指定的回调函数。
|
//finally不管成功失败都会执行内部代码，不接受参数。
|
|
|
//2.在本轮 事件循环 运行完成之前，回调函数是不会被调用的。
|
console.log("在本轮 事件循环 运行完成之前，回调函数是不会被调用的，你看我是最先执行的");
|
//3.即使异步操作已经完成（成功或失败），在这之后通过 then() 添加的回调函数也会被调用。
|
const promise5 = new Promise((resolve)=>{
|
setTimeout(()=>{
|
console.log("promise5 执行的异步操作");
|
resolve();
|
},10);
|
}).then(()=>{console.log("promise5 默认回调")});
|
setTimeout(()=>{
|
promise5.then(() => {
|
console.log("promise5 即使异步操作已经完成（成功或失败），在这之后通过 then() 添加的回调函数也会被调用");
|
});
|
},1000);
|
</script>
|
</head>
|
<body>
|
|
</body>
|
</html>
|
