本篇内容介绍了“JS循环中使用await会产生什么反应”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成! 这个问题是这样产生的?某天,在学习异步的知识遇到这样一道题:使用Promise的方式,每隔一秒输出数组中一个值
constarr=[1,2,3] arr.reduce((pre,cur)=>{ returnpre.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); }) })
看完之后,我就在想,如果我在循环中,每次输出值之后停止一秒,也可以解决,于是乎就有了以下代码
constarr=[1,2,免费云主机、域名3] constsleep=(ms)=>{ returnnewPromise((resolve,reject)=>{ setTimeout(()=>{ resolve() },ms) }) } for(leti=0;i
打印结果也是符合预期的,在这里我就产生了第一个疑问:await不是要搭配async使用的么?这里怎么能单独使用?(不信你把代码放到浏览器控制台试试)接着我把for改成了forEach,发现根本达不到效果,第二个疑问产生:forEach中await为什么失效了呢?
arr.forEach(asyncitem=>{ console.log(item); awaitsleep(1000) })
带着这两个疑问,那就开始学习起来,寻找答案。在for循环中的await记得在学习async/await的时候有这样一句话,await只能和async搭配一起使用,其实这句话是没有错的。那为什么前面可以直接写await呢,因为我是直接写在浏览器控制台的,咱们在编辑器写代码的时候一定要套一个async使用的
所以这就算闹了个笑话,哈哈,不过当我遇到不理解的时候,又多了一个思考方向。好的,如上所述,await确实发挥了他的作用,让JS直到等到了promise返回的处理结果,再继续往下执行;那for...of,while是不是也可以呢
constlogByForof=async()=>{ for(constitemofarr){ console.log(item); awaitsleep(1000) } } logByForof()
constlogByWhile=async()=>{ leti=0 while(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
map/forEach是简单的执行下回调函数,并不会处理异步的情况。即:map/forEach 会同时创建出多个回调函数,多个回调函数被加上了各自的 async、await,如下
async()=>{ awaitsleep(1000); } async()=>{ awaitsleep(1000); } async()=>{ awaitsleep(1000); }
各个函数之间是独立的,彼此的回调也是独立的;请求是异步的,彼此之间又没有关联,顺序也就自然无法保证。“JS循环中使用await会产生什么反应”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注云技术网站,小编将为大家输出更多高质量的实用文章!
这篇文章主要介绍“react如何实现路由跳转前确认”的相关知识,小编通过实际案例向大家展示操作过程,操作方法简单快捷,实用性强,希望这篇“react如何实现路由跳转前确认”文章能帮助大家解决问题。 react实现路由跳转前确认功能的方法:1、通过“import…