Promise对象的参数为一个回调函数，这个回调函数有两个参数，分别是resolve, reject（这俩参数的名字可任取），resolve，reject分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数 。

<!DOCTYPE html>

    <html lang="en">

    <head>

        <meta charset="UTF-8">

        <title></title>

        <style>

    	</style>

    </head>

    <body>

    <script>

    	const imgs = [

    	 'http://img1.3lian.com/2015/a1/14/d/151.jpg',

    	 'http://photos.tuchong.com/110168/f/2034247.jpg',

    	 'http://img1.3lian.com/2015/a1/129/d/193.jpg'

    	];

    	/* 第一步：实例化Promise对象

    		该对象的参数为一个回调函数，这个回调函数有两个参数，分别是resolve, reject（这俩参数的名字可任取），resolve，reject分别表示异步操作执行成功后的回调函数和异步操作执行失败后的回调函数

    	*/

    	const p = new Promise(function (resolve, reject){

    	  const img = new Image(); // 声明一个image

    	  img.src = imgs[1];

    	  img.onload = function (){ // 指当图片加载(onload)成功时，执行resolve函数

    		resolve(this); // resolve(this)指将图片本身当做参数传给resolve

    	  };

    	  img.onerror = function (){ // 指当图片加载失败时，执行reject函数

    		reject(new Error('图片加载失败'));

    	  };

    	});

    	/* 第二步：Promise对象处理方法

    		Promise对象有两个原型方法：

    			Promise.prototype.then()

    			Promise.prototype.catch()

    		一旦Promise对象创建完成，就可以调用上面两个方法

    	*/

    	// then()方法,接收连个参数，第一个参数为执行成功的回调函数，第二个参数为执行失败的回调函数(但是，一般后面的回调函数不常用，通常用catch()来捕获异常)

    	p.then(function (img) { // img就是上面resolve(this)中的this传过来的

    		document.body.appendChild(img)

    	}).catch(function (err) { // catch()来捕获异常,若图片加载失败，则执行之

    		console.log(err)

    	})

    </script>

    </body>

    </html>

ECMAScript6——异步操作之Promise的更多相关文章

  1. 异步操作之 Promise 和 Async await 用法进阶

    ES6 提供的 Promise 方法和 ES7 提供的 Async/Await 语法糖都可以更好解决多层回调问题, 详细用法可参考:https://www.cnblogs.com/cckui/p/99 ...

  2. ES6异步操作之Promise

    一直以来觉得异步操作在我心头像一团迷雾,可是它重要到我们非学不可,那就把它的面纱解开吧. ES6 诞生以前,异步编程的方法,大概有下面四种. 回调函数 事件监听 发布/订阅 Promise 对象 异步 ...

  3. ES6——异步操作之Promise

    基本概念: Promise : 是 ES6 中新增的异步编程解决方案,提现在代码中他是一个对象 可以通过Promise构造函数来实例化. -new Promise(cb) ===> 实例的基本使 ...

  4. JS异步操作之promise发送短信验证码.html

    <!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta cont ...

  5. javascript中的异步操作以及Promise和异步的关系

    https://segmentfault.com/a/1190000004322358 Promise是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和强大 https://se ...

  6. Promise异步操作

    Promise是es6中新增加的类(new Promise),目的为了管理JS中异步编程,也叫“Promise”设计模式 Promise用来解决异步问题.本身是同步的,只是用来管理异步编程的一种模式 ...

  7. 简单理解ECMAScript2015中的Promise

    ECMAScript6中新增了Promise对象, 所谓Promise对象,即代表着一个还未完成,但将来某时会完成的操作(通常是异步操作).使用Promise对象,我们就可以避免陷入函数层层嵌套的‘回 ...

  8. promise异步编程的原理

    一.起源 JavaScript中的异步由来已久,不论是定时函数,事件处理函数还是ajax异步加载都是异步编程的一种形式,我们现在以nodejs中异步读取文件为例来编写一个传统意义的异步函数: var ...

  9. 浅谈Promise

    学习过JavaScript的人都知道,JavaScript是单线程作业,这样会有一个很大的缺陷,所有的Ajax,浏览器事件等,都是通过异步去完成.所谓的同步和异步最大的区别无非就是在于同步会阻塞后续代 ...

随机推荐

  1. mysql主从不同步问题 Error_code: 1197

    首先查看从的状态   mysql> show slave status \G *************************** 1. row *********************** ...

  2. ln -s 软连接介绍

    软连接(softlink)也称符号链接.linux里的软连接文件就类似于windows系统中的快捷方式.软连接文件实际上是一个特殊的文件,文件类型是I.软连接文件实际上可以理解为一个文本文件,这个文件 ...

  3. RecyclerView嵌套TextView时显示文字不全的解决方法之一

    先描述一下这个小bug:简单的TextView嵌套RecyclerView作为itemView时,可能会在文本中出现布局覆盖的现象,itemView的布局其实很简单,就是一个RelativeLayou ...

  4. /etc/sudoers文件的分析以及sudo的高级用法

    高级用法总结: sudo命令是普通用户的提权操作指令.在权限控制中,我们可以使用/etc/sudoers文件中来进行设置.基本的用法比较熟悉.比如设置一个普通用户可拥有root用户的运行权限,那么设置 ...

  5. 乘风破浪：LeetCode真题_023_Merge k Sorted Lists

    乘风破浪:LeetCode真题_023_Merge k Sorted Lists 一.前言 上次我们学过了合并两个链表,这次我们要合并N个链表要怎么做呢,最先想到的就是转换成2个链表合并的问题,然后解 ...

  6. vc MFC 通过IDispatch调用默认成员函数

    CComPtr<IDispatch> spDisp(IDispatch *); if(!spDisp) return; DISPPARAMS dispParam={0}; //没有参数 V ...

  7. spark-机器学习实践-K近邻应用实践一

    K近邻应用-异常检测应用 原理: 根据数据样本进行KMeans机器学习模型的建立,获取簇心点,以簇为单位,离簇心最远的第五个点的距离为阈值,大于这个值的为异常点,即获得数据异常. 如图:

  8. 用JS制作《飞机大作战》游戏_第1讲（素材查找和界面框架搭建）-陈远波

    一.查找素材: 二.分析游戏界面框架: 登录界面.游戏界面.暂停游戏界面.玩家死亡后弹出界面:并对应的界面包含什么元素: 三.分别搭建以上四个界面: 1.登录界面与游戏界面框架(隐藏游戏界面,四个界面 ...

  9. Google常用脚本

    1.Tampermonkey 可下载常用脚本:https://greasyfork.org/zh-CN 2.常用FQSetupVPN 3.百度药丸屏蔽广告 4.百度文档可粘贴,下载 5.VIP视频可看

  10. MySql详解（七）

    MySql详解(七) MySql视图 一.含义 mysql5.1版本出现的新特性,本身是一个虚拟表,它的数据来自于表,通过执行时动态生成. 好处: 1.简化sql语句 2.提高了sql的重用性 3.保 ...