JS循环中使用await会产生什么反应

本篇内容介绍了“JS循环中使用await会产生什么反应”的有关知识,在实际案例的操作过程中,不少人都会遇到这样的困境,接下来就让小编带领大家学习一下如何处理这些情况吧!希望大家仔细阅读,能够学有所成!

这个问题是这样产生的?某天,在学习异步的知识遇到这样一道题:使用Promise的方式,每隔一秒输出数组中一个值

const arr = [1, 2, 3]
arr.reduce((pre, cur) => {
  return pre.then(() => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve(console.log(cur))
      }, 1000);
    })
  })
}, Promise.resolve())

那这段代码还是挺好了解的,相当于

Promise.resolve().then(() => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(console.log(1))
    }, 1000);
  })
}).then(() => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(console.log(2))
    }, 1000);
  })
}).then(() => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve(console.log(3))
    }, 1000);
  })
})

看完之后,我就在想,如果我在循环中,每次输出值之后停止一秒,也可以解决,于是乎就有了以下代码

const arr = [1, 2, 3]
const sleep = (ms) => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve()
    }, ms)
  })
}
for (let i = 0; i < arr.length; i++) {
  console.log(arr[i]);
  await sleep(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]
   const sleep = (ms) => {
     return new Promise((resolve, reject) => {
       setTimeout(() => {
         resolve()
       }, ms)
     })
   }
   const logByOneSecond = async () => {
     for (let i = 0; i < arr.length; i++) {
       console.log(arr[i]);
       await sleep(1000)
     }
   }   
   logByOneSecond()
 </script>

所以这就算闹了个笑话,哈哈,不过当我遇到不理解的时候,又多了一个思考方向。

好的,如上所述,await确实发挥了他的作用,让JS直到等到了promise返回的处理结果,再继续往下执行;那for...of,while是不是也可以呢

const logByForof = async () => {
  for (const item of arr) {
    console.log(item);
    await sleep(1000)
  }    
}
logByForof()
const logByWhile = async () => {
  let i = 0
  while (i !== arr.length) {
    await sleep(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);
}

各个函数之间是独立的,彼此的回调也是独立的;请求是异步的,彼此之间又没有关联,顺序也就自然无法保证。

“JS循环中使用await会产生什么反应”的内容就介绍到这里了,感谢大家的阅读。如果想了解更多行业相关的知识可以关注编程之家网站,小编将为大家输出更多高质量的实用文章!

版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。

相关推荐


js如何实现弹出form提交表单?(图文+视频)
js怎么获取复选框选中的值
js如何实现倒计时跳转页面
如何用js控制图片放大缩小
JS怎么获取当前时间戳
JS如何判断对象是否为数组
JS怎么获取图片当前宽高
JS对象如何转为json格式字符串
JS怎么获取图片原始宽高
怎么在click事件中调用多个js函数
js如何往数组中添加新元素
js如何拆分字符串
JS怎么对数组内元素进行求和
JS如何判断屏幕大小
js怎么解析json数据
js如何实时获取浏览器窗口大小
原生JS实现别踩白块小游戏(五)
原生JS实现别踩白块小游戏(一)
原生JS实现别踩白块小游戏(七)
原生JS实现别踩白块小游戏(二)