凡科建站相关链接,建筑模板做凳子,杭州网站建设模板,奎屯市网站【ES6.0】- Promise对象 文章目录 【ES6.0】- Promise对象一、概述二、Promise状态三、Promise方法3.1 Promise.prototype.then方法#xff1a;链式操作3.2 Promise.prototype.catch方法#xff1a;捕捉错误3.3 Promise.race方法#xff1a;捕捉错误3.4 Promise.any()3.5 Pr…【ES6.0】- Promise对象 文章目录 【ES6.0】- Promise对象一、概述二、Promise状态三、Promise方法3.1 Promise.prototype.then方法链式操作3.2 Promise.prototype.catch方法捕捉错误3.3 Promise.race方法捕捉错误3.4 Promise.any()3.5 Promise.all()3.6 Promise.allSettled() 四、总结 一、概述 Promise是异步编程的一种解决方案是一种javascript处理异步操作的一种常见方式。Promise是一种处理异步操作的设计模式提供了一种更结构化更可靠的方式来处理异步任务。 二、Promise状态 Promise异步操作有三种状态pending(进行中)、fulfilled(已成功)和rejected(已失败)。除了异步操作的结果任何其他操作都无法改变状态。 Promise对象只有从pending变为fulfilled和从penging变为rejected的状态改变。只要处于fulfilled和rejected,状态就不会再变为resolved (已定型)。 Promise状态演示 const pm1new Promise(function(resolve,reject){resolve(resolve1)resolve(resolve2) })const pm2new Promise(function(resolve,reject){resolve(resolve3)reject(reject1) })pm1.then(function(value){console.log(pm1-then-value,value) //resolve1 })pm2.then(function(value){console.log(pm2-then-value,value) // resolve3 })状态的缺点 无法取消Promise,一旦新建它就会立即执行无法中途取消。如果不设置回调函数Promise内部抛出的错误不会反应到外部。当处于pending状态时无法得知目前进展到哪一个阶段。 三、Promise方法 3.1 Promise.prototype.then方法链式操作 Promise.prototype.then方法返回的是一个新的Promise对象因此可以采用链式写法 const pm1new Promise(function(resolve,reject){resolve(resolve-01) }) pm.then(function(value){console.log(value)return value-02 }).then(function(value){console.log(value)return value-03 }).then(function(value){console.log(value) })输出结果 resolve-01 resolve-01-02 resolve-01-02-03上面的代码使用then方法依次指定了两个回调函数。第一个回调函数完成以后会将返回结果作为参数传入第二个回调函数第二个回调函数完成以后会把返回值作为参数出入给第三个回调函数依次直至结束。 如果前一个回调函数返回的是Promise对象这个时一个回调函数就会等待该Promise对象有了运行结果才进一步调用 const pmFun(param){return new Promise((resolve,reject){setTimeout((){if(param100){resolve(输入值100,传入值为:param)}else{reject(输入值100,传入值为:param)}},2000)}) } pmFun(50).then((resp){console.log(then-1,resp)return pmFun(83) }).then((resp){console.log(then-2,resp) })输出结果 输入值100,传入值为:50 输入值100,传入值为:82Promisei的这种设计使得嵌套的异步操作可以被很容易得到改写从回调函数的“横向发展”改为“向下发展”。 3.2 Promise.prototype.catch方法捕捉错误 Promise.prototype.catch方法是Promise.prototype.then(null,rejection)的别名用于指定发生错误时回调函数。 const pmFun(param){return new Promise((resolve,reject){setTimeout((){if(param100){resolve(输入值100,传入值为:param)}else{reject(输入值100,传入值为:param)}},2000)}) } pmFun(50).then((resp){console.log(then-1,resp)return pmFun(83) }).then((resp){console.log(then-1,resp) }).catch((resp){console.log(catch,resp) })Promise对象的错误具有“冒泡”性质会一直向后传递直到被捕捉为止也就是说错误总是会被下一个catch语句捕捉。 3.3 Promise.race方法捕捉错误 Promise.race()方法允许我们同时发起多个异步操作并在其中一个操作解决fulfilled或拒绝rejected时得到结果。它的语法如下 Promise.race([promise1,promise2,..])其中promise1,promise2等为Promise对象数组。新的Promise的状态将与第一个解决或拒绝的Promise的状态相同。 const p1new Promise((resolve,reject){setTimeout(resolve,2000,one) }) const p2new Promise((resolve,reject){setTimeout(resolve,1000,two) }) const p3new Promise((resolve,reject){setTimeout(resolve,3000,three) }) const p3new Promise((resolve,reject){setTimeout(resolve,3000,three) }) Promise.race([p1,p2,p3]).then((resp){console.log(then,resp) }).catch((resp){console.log(catch,resp) })运行结果 then tworace函数返回一个Promise,它将与第一个传递的promise相同的完成方式被完成。它可以是完成resolves,也可以是失败rejects,这要取决第一个完成的方式是两个中的哪个。 如果传的迭代是空的则返回的 promise 将永远等待。 如果迭代包含一个或多个非承诺值和/或已解决/拒绝的承诺则 Promise.race 将解析为迭代中找到的第一个值。 race在遇见立即执行的reject时并没有像any一样继续等待resolve的返回而是直接返回了reject的内容。 3.4 Promise.any() Promise.any()接收一个由Promise所组成的可迭代iterable对象该方法会返回一个新的promise,一旦迭代对象内的任意一个promise变成了兑现状态那么由该方法所有返回的promise就会变成兑现状态并且它的兑现值就是可迭代对象内的首先兑现的promise的兑现值。 如果可迭代对象内的promise最终都没有兑现即所有 promise 都被拒绝了,那么该方法所返回的 promise 就会变成拒绝状态并且它的拒因会是一个 AggregateError 实例这是 Error 的子类用于把单一的错误集合在一起。 const p1new Promise((resolve,reject){setTimeout(resolve,2000,one) }) const p2new Promise((resolve,reject){setTimeout(resolve,1000,two) }) const p3new Promise((resolve,reject){setTimeout(resolve,3000,three) }) const p4new Promise((resolve,reject){reject(P4-reject) }) Promise.race([p1,p2,p3,p4]).then((resp){console.log(then,resp) }).catch((resp){console.log(catch,resp) })tren,two只要参数实例有一个变成fulfilled状态包装实例就会变成fulfilled状态如果所有参数实例都变成rejected状态包装实例就会变成rejected状态。 Promise.any()和Promise.race()方法很像只有一点不同就是Promise.any()不会因为某个Promise变成rejected状态而结束必须等到所有参数Promise变成rejected状态才会结束。 3.5 Promise.all() Promise.all()方法接收一个 Promise的iterable类型的输入。并且只返回一个Promise实例那个输入的所有promise的resolve回调的结果是一个数组。 Promise的resolve回调执行是在所有输入的promise的resolve回调都结束或者输入的iterable里没有promise了的时候。 它的reject回调执行时只要任何一个输入的promise的reject回调执行或者执行或者输入不合格的promise就会立即抛出错误并且reject的是第一个抛出的错误信息。 var p1 new Promise((resolve, reject) {setTimeout(resolve, 1000, p1-one); }); var p2 new Promise((resolve, reject) {setTimeout(resolve, 2000, p2-two); }); var p3 new Promise((resolve, reject) {setTimeout(resolve, 3000, p3-three); }); var p4 new Promise((resolve, reject) {setTimeout(resolve, 4000, p4-four); }); var p5 new Promise((resolve, reject) {reject(reject); });Promise.all([p1, p2, p3, p4, p5]).then(values {console.log(values); }, reason {console.log(reason) });then [p1-one,p2-two,p3-three,p4-four]Promise.all()主要应用需要所有异步任务都同时进行并且完成时可以使用all方法。 3.6 Promise.allSettled() Promise.allSettled()方法返回一个在所有给定的promise都已经fulfilled或rejected后的pronise,并带有一个对象数组每个对象表示对应的promise结果。 当您有多个彼此不依赖的异步任务成功完成时或者您总是想知道每个promise的结果时通常使用它。 相比之下Promise.all()更适合彼此相互依赖或者在其中任何一个reject时立即结束。 var p1 new Promise((resolve, reject) {setTimeout(resolve, 4000, p1-one); }); var p2 new Promise((resolve, reject) {setTimeout(resolve, 3000, p2-two); }); var p3 new Promise((resolve, reject) {setTimeout(resolve, 2000, p3-three); }); var p4 new Promise((resolve, reject) {setTimeout(resolve, 1000, p3-four); }); var p5 new Promise((resolve, reject) {reject(p5-reject); });Promise.allSettled([p1, p2, p3, p4, p5]).then(values {console.log(values); }, reason {console.log(reason) });then [{status:fulfilled,value:p1-one},{status:fulfilled,value:p2-two},{status:fulfilled,value:p3-three},{status:fulfilled,value:p4-four},{status:rejected,value:p5-reject}]一旦所指定的 promises 集合中每一个 promise 已经完成无论是成功的达成或被拒绝未决议的 Promise将被异步完成。那时所返回的 promise 的处理器将传入一个数组作为输入该数组包含原始 promises 集中每个 promise 的结果。 对于每个结果对象都有一个 status 字符串。如果它的值为 fulfilled则结果对象上存在一个 value 。如果值为 rejected则存在一个 reason 。value或 reason 反映了每个 promise 决议或拒绝的值。 可以发现和all相比allSettled在其中一个promise返回错误时还可以继续等待结果。并且不管内部的计时器定时多少毫秒它都会等所有结果返回后按照传参传入的顺序返回promise结果。 四、总结 根据不同场景选择 Promise.all、Promise.race、Promise.allSettled 和 Promise.any 四个方法合适的使用。