当前位置: 代码迷 >> 综合 >> Promise链式操作、扩展接口(resolve,reject,all,allSettled,race))
  详细解决方案

Promise链式操作、扩展接口(resolve,reject,all,allSettled,race))

热度:39   发布时间:2023-12-13 02:03:26.0

**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);
});
  相关解决方案