let p = ['http://img3.imgtn.bdimg.com/it/u=3278834702,2663618759&fm=26&gp=0.jpg', 'http://img5.imgtn.bdimg.com/it/u=4180508012,1972588723&fm=15&gp=0.jpg', 'http://img10.360buyimg.com/n1/s350x449_jfs/t14989/169/1956143206/90455/a454f42c/5a657289N4b6344d4.jpg%21cc_350x449.jpg', 'http://b-ssl.duitang.com/uploads/item/201707/24/20170724135526_FCnkr.thumb.700_0.jpeg'];

function createImg(url) {
return new Promise((resolve, reject) => {
setTimeout(() => {
let img = new Image();
img.src = url;
document.body.append(img)
img.onload = () => {
resolve(img)
}
img.onerror = () => {
reject("加载失败")
}
}, 1000)
})
}

# forEach代码

p.forEach(async (item) => {
await createImg(item)
})

for循坏代码

async function run() {
for (let i = 0; i < p.length; i++) {
await createImg(p[i])
}
}
run()

当async/await碰见forEach-------------爆炸的更多相关文章

  1. 为什么 array.foreach 不支持 async/await

    一.背景 react 项目中,渲染组件时,显示的数据一直有问题,本来以为是 react 组件的问题,后来才发现罪魁祸首在 fetch 数据的过程,因为我用了 async/await ,而却搭配了 fo ...

  2. [.NET] 怎样使用 async & await 一步步将同步代码转换为异步编程

    怎样使用 async & await 一步步将同步代码转换为异步编程 [博主]反骨仔 [出处]http://www.cnblogs.com/liqingwen/p/6079707.html  ...

  3. [.NET] 利用 async & await 进行异步 IO 操作

    利用 async & await 进行异步 IO 操作 [博主]反骨仔 [出处]http://www.cnblogs.com/liqingwen/p/6082673.html  序 上次,博主 ...

  4. EntityFramework 如何进行异步化(关键词:async·await·SaveChangesAsync·ToListAsync)

    应用程序为什么要异步化?关于这个原因就不多说了,至于现有项目中代码异步化改进,可以参考:实际案例:在现有代码中通过async/await实现并行 这篇博文内容针对的是,EntityFramework ...

  5. 你眼中的async/await是什么样的?

    又到了周末的code review环节,这次code review发现了一个对async/await的理解问题.让我们直奔主题: var foodsSearch = new FoodSearchSer ...

  6. C#中async/await中的异常处理

    在同步编程中,一旦出现错误就会抛出异常,我们可以使用try-catch来捕捉异常,而未被捕获的异常则会不断向上传递,形成一个简单而统一的错误处理机制.不过对于异步编程来说,异常处理一直是件麻烦的事情, ...

  7. .NET异步操作学习之一:Async/Await中异常的处理

    以前的异常处理,习惯了过程式的把出现的异常全部捕捉一遍,然后再进行处理.Async/Await关键字出来之后的确简化了异步编程,但也带来了一些问题.接下来自己将对这对关键字进行学习.然后把研究结果放在 ...

  8. 对[yield]的浅究到发现[async][await]

    原文:对[yield]的浅究到发现[async][await] 上篇对[foreach]的浅究到发现[yield]写完后,觉得对[yield]还没有理解清楚,想起曾经看过一位大牛的帖子讲的很深刻(链接 ...

  9. 仿async/await(一)and Gulp:新一代前端构建利器

    NET 4.5的async/await真是个神奇的东西,巧妙异常以致我不禁对其实现充满好奇,但一直难以窥探其门径.不意间读了此篇强文<Asynchronous Programming in C# ...

随机推荐

  1. Luogu P1948 [USACO08JAN]电话线Telephone Lines(最短路+dp)

    P1948 [USACO08JAN]电话线Telephone Lines 题意 题目描述 Farmer John wants to set up a telephone line at his far ...

  2. [原创]iFPGA-Cable FT2232H Xilinx / Altera / Lattice 三合一JTAG & UART调试器-详细使用说明

    iFPGA-Cable调试器使用说明 全文分为6部分: 第0部分:实物.连线及其驱动安装说明 第1部分:Xilinx JTAG 第2部分:UART 第3部分:Altera JTAG 第4部分:Latt ...

  3. 傻瓜式教程--实现登录页面的验证码以及验证(VUE)

    做成之后就 是这个样子 接下来上代码创建一个组件.显示验证码图片 <template> <div class="s-canvas"> <canvas ...

  4. Jan's light oj 01--二分搜索篇

    碰到的一般题型:1.准确值二分查找,或者三分查找(类似二次函数的模型). 2.与计算几何相结合答案精度要求比较高的二分查找,有时与圆有关系时需要用到反三角函数利用 角度解题. 3.不好直接求解的一类计 ...

  5. oracle function学习1

    oracle function学习基层: 函数就是一个有返回值的过程.  首先 知道oracle 使用限制:      函数调用限制: 1. SQL语句中只能调用存储函数(服务器端),而不能调用客户端 ...

  6. day18 13.乐观锁介绍

    乐观锁是使用版本字段,悲观锁是使用数据库底层的锁机制.mysql的类型timestamp(时间戳)有一个特点:插入数据不用管我,我取系统当前默认值.timestamp插入时间会记录,修改时间也会记录. ...

  7. day36 11-Hibernate中的事务:当前线程中的session

    如果你没有同一个session开启事务的话,那它两是一个独立的事务.必须是同一个session才有效.它给我们提供一个本地线程的session.这个session就保证了你是同一个session.其实 ...

  8. ScrollView 实现子视图滑动到顶部时固定不动

    这个,个人建议使用自己写的布局使用view的gon或者visble的方法,使用design包中的控件来的话,局限性很大 方法有倆 (1)自定义ScrollView 重写ScrollView 的 com ...

  9. web前端学习(二)html学习笔记部分(8)--服务器推送事件3

    1.2.22  html5服务器推送事件 1.2.22.1  html5服务器推送事件介绍 服务器推送事件(Server-sent Events)是HTML5规范中的一个组成部分,可以用来从服务器端实 ...

  10. web前端学习(二)html学习笔记部分(3)--range对象

    1.2.8  html5编辑api之range对象(一) 1.2.8.1  Range 对象基本概念 Range 对象的基本概念,通过使用 Range 对象所提供的方法实现一个鼠标选取内容,通过点击按 ...