计算机网站开发,哪个网站查食品建设好,个人发布信息的免费平台,甘肃永靖建设住建局网站前言这个问题是这样产生的#xff1f;某天#xff0c;在学习异步的知识遇到这样一道题#xff1a;使用Promise的方式#xff0c;每隔一秒输出数组中一个值const arr [1, 2, 3]
arr.reduce((pre, cur) {return pre.then(() {returnnewPromise((resolve, rejec…前言这个问题是这样产生的某天在学习异步的知识遇到这样一道题使用Promise的方式每隔一秒输出数组中一个值const arr [1, 2, 3]
arr.reduce((pre, cur) {return pre.then(() {returnnewPromise((resolve, reject) {setTimeout(() {resolve(console.log(cur))}, 1000);})})
}, Promise.resolve())
复制代码那这段代码还是挺好了解的相当于Promise.resolve().then(() {returnnewPromise((resolve, reject) {setTimeout(() {resolve(console.log(1))}, 1000);})
}).then(() {returnnewPromise((resolve, reject) {setTimeout(() {resolve(console.log(2))}, 1000);})
}).then(() {returnnewPromise((resolve, reject) {setTimeout(() {resolve(console.log(3))}, 1000);})
})
复制代码看完之后我就在想如果我在循环中每次输出值之后停止一秒也可以解决于是乎就有了以下代码const arr [1, 2, 3]
constsleep (ms) {returnnewPromise((resolve, reject) {setTimeout(() {resolve()}, ms)})
}
for (let i 0; i arr.length; i) {console.log(arr[i]);awaitsleep(1000)
}
复制代码打印结果也是符合预期的在这里我就产生了第一个疑问await不是要搭配async使用的么这里怎么能单独使用不信你把代码放到浏览器控制台试试接着我把for改成了forEach,发现根本达不到效果第二个疑问产生forEach中await为什么失效了呢arr.forEach(async item {console.log(item);await sleep(1000)
})
复制代码带着这两个疑问那就开始学习起来寻找答案。在for循环中的await记得在学习async/await的时候有这样一句话await只能和async搭配一起使用其实这句话是没有错的。那为什么前面可以直接写await呢因为我是直接写在浏览器控制台的咱们在编辑器写代码的时候一定要套一个async使用的script const arr [1, 2, 3]constsleep (ms) {returnnewPromise((resolve, reject) {setTimeout(() {resolve()}, ms)})}constlogByOneSecond async () {for (let i 0; i arr.length; i) {console.log(arr[i]);awaitsleep(1000)}} logByOneSecond()/script
复制代码所以这就算闹了个笑话哈哈不过当我遇到不理解的时候又多了一个思考方向。好的如上所述await确实发挥了他的作用让JS直到等到了promise返回的处理结果再继续往下执行那for...of,while是不是也可以呢const logByForof async () {for (const item of arr) {console.log(item);await sleep(1000)}
}
logByForof()
复制代码constlogByWhile async () {let i 0while (i ! arr.length) {awaitsleep(1000)console.log(arr[i]);i}
}
logByWhile()
复制代码结果也是符合预期可以在循环中使用await并实现效果在forEach循环中的await如一开始在forEach中并没有的到预期的效果首先得到一个结果forEach中async 和await是无效的。那我看到的解释有以下几种JavaScript 中的 forEach不支持 promise 感知也不支持 async 和await所以不能在 forEach 使用 await 。map/forEach内部使用了while结合callback方式来执行函数await不会等待callback的执行forEach 只支持同步代码第二种说法简化以后的伪代码如下while(index arr.length){callback(item, index)
}
复制代码map/forEach是简单的执行下回调函数并不会处理异步的情况。即map/forEach 会同时创建出多个回调函数多个回调函数被加上了各自的 async、await如下async (){await sleep(1000);
}
async (){ await sleep(1000);
}
async (){ await sleep(1000);
}
复制代码各个函数之间是独立的彼此的回调也是独立的请求是异步的彼此之间又没有关联顺序也就自然无法保证总结回顾了 async/await 在循环语句里的使用方法对于普通的 for-loop所有的 await 都是串行调用的可以放心使用包括 while、for-in、for-of 等等;但是在有 callback 的 array 方法如 forEach、map、filter、reduce 等等有许多副作用最好就别使用 await 了。大厂面试题分享 面试题库前端后端面试题库 面试必备 推荐★★★★★地址前端面试题库
