经验总结

  1. 首页 > 生活 > >

JavaScript的异步编程之Promise( 四 )

生活百科

Promise.race方法一样也是接收一个数组 ， 这些元素都是一个Promise对象 ， 这个方法会返回一个全新的Promise对象 ， 不同的是只要有一个Promise执行是成功的就算成功 ， 只有全部都失败了才会失败 。这个全新的Promise 的 onFulfilled的回调函数的参数为第一个成功完成的Promise所传递的数据
const alwaysError = new Promise((resolve, reject) => {reject("失败就失败下一个成功");});const two = new Promise((resolve, reject) => {setTimeout(resolve, 30, "我是第二个完成的Promise");});const three = new Promise((resolve, reject) => {setTimeout(resolve, 70, "我是第三个个完成的Promise");});const one = new Promise((resolve, reject) => {setTimeout(resolve, 10, "我是最先完成的Promise");});Promise.any([two, three, alwaysError, one]).then((value) => {console.log(value); // 我是最先完成的Promise// 这个value是最先完成的Promise传递的值也就是=>我是最先完成的Promise})Promise 执行时序问题宏任务 ， 微任务
测试执行顺序
console.log('global start')Promise.resolve().then(ret => {console.log('promise')})console.log('global end')// outlog// 1. global start// 2. global end// 3. promise链式调用多个执行看执行顺序
console.log('global start')Promise.resolve().then(ret => {console.log('promise1')}).then(ret => {console.log('promise2')}).then(ret => {console.log('promise3')})console.log('global end')// outlog// 1. global start// 2. global end// 3. promise1// 4. promise2// 5. promise3加入setTimeout
console.log('global start')setTimeout(() => {console.log('settimeout')}, 0);Promise.resolve().then(ret => {console.log('promise1')}).then(ret => {console.log('promise2')}).then(ret => {console.log('promise3')})console.log('global end')// 1. global start// 2. global end// 3. promise1// 4. promise2// 5. promise3// 6. settimeout没想到吧 ， Promise的异步时序执行优点特殊 。举个例子、假如我们去银行ATM办理存款 ， 办完之后突然想起要转一笔账 ， 这时候肯定会直接办理转账业务 ， 不会到后面重新排队再转账 。这个例子中我们排队就像在javascipt中的等待执行的任务一样 ， 我们队伍中的每一个人都对应着回调回列中的一个任务、 。回调队列中任务称之为宏任务 ， 而宏任务执行过程中可以临时加上一些额外需求 ， 这些额外的需求可以选择作为一个新的宏任务进行到队列中排队 。上面的setTimeout就会作为宏任务再次到回调队列中排队 ， 也可以跟我们刚的例子一样作为当前任务的微任务直接在当前任务结束之后立即执行 。Promise的回调会作为微任务执行 ， 会在本轮调用的末尾去执行 ， 所以说上面代码会先打印promise1 ， promise2 ， promise3在打印settimeout
微任务是在后来才被引入到js中的 ， 他的目的是为了提高整体的响应能力 ， 目前的绝大多数异步调用都是作为宏任务执行 。Promise、MutationObserver 和nodejs 中的process.nextTick会作为微任务在本轮调用的末尾执行

更多内容微信公众号搜索充饥的泡饭小程序搜一搜开水泡饭的博客

经验总结扩展阅读


上一篇：恋爱后，仍然会假装单身的星座

下一篇：世界上鼻子最长的猴子叫什么