ECMAScript6——异步操作之Promise
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的更多相关文章
- 异步操作之 Promise 和 Async await 用法进阶
ES6 提供的 Promise 方法和 ES7 提供的 Async/Await 语法糖都可以更好解决多层回调问题, 详细用法可参考:https://www.cnblogs.com/cckui/p/99 ...
- ES6异步操作之Promise
一直以来觉得异步操作在我心头像一团迷雾,可是它重要到我们非学不可,那就把它的面纱解开吧. ES6 诞生以前,异步编程的方法,大概有下面四种. 回调函数 事件监听 发布/订阅 Promise 对象 异步 ...
- ES6——异步操作之Promise
基本概念: Promise : 是 ES6 中新增的异步编程解决方案,提现在代码中他是一个对象 可以通过Promise构造函数来实例化. -new Promise(cb) ===> 实例的基本使 ...
- JS异步操作之promise发送短信验证码.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <meta cont ...
- javascript中的异步操作以及Promise和异步的关系
https://segmentfault.com/a/1190000004322358 Promise是异步编程的一种解决方案,比传统的解决方案--回调函数和事件--更合理和强大 https://se ...
- Promise异步操作
Promise是es6中新增加的类(new Promise),目的为了管理JS中异步编程,也叫“Promise”设计模式 Promise用来解决异步问题.本身是同步的,只是用来管理异步编程的一种模式 ...
- 简单理解ECMAScript2015中的Promise
ECMAScript6中新增了Promise对象, 所谓Promise对象,即代表着一个还未完成,但将来某时会完成的操作(通常是异步操作).使用Promise对象,我们就可以避免陷入函数层层嵌套的‘回 ...
- promise异步编程的原理
一.起源 JavaScript中的异步由来已久,不论是定时函数,事件处理函数还是ajax异步加载都是异步编程的一种形式,我们现在以nodejs中异步读取文件为例来编写一个传统意义的异步函数: var ...
- 浅谈Promise
学习过JavaScript的人都知道,JavaScript是单线程作业,这样会有一个很大的缺陷,所有的Ajax,浏览器事件等,都是通过异步去完成.所谓的同步和异步最大的区别无非就是在于同步会阻塞后续代 ...
随机推荐
- IP解析计算机名称
#-*- coding: UTF-8 -*- import subprocess,sys,threading reload(sys) sys.setdefaultencoding('utf-8') d ...
- 【转】Nginx学习---Nginx&&Redis&&hcache三层缓存架构总结
[原文]https://www.toutiao.com/i6594307974817120782/ 摘要: 对于高并发架构,毫无疑问缓存是最重要的一环,对于大量的高并发,可以采用三层缓存架构来实现,n ...
- 第 15 章 位操作（invert4）
/*------------------------------------ invert4.c -- 使用位操作显示二进制 ------------------------------------* ...
- October 22nd, 2017 Week 43rd Sunday
Yesterday is not ours to recover, but tomorrwo is ours to win or lose. 我们无法重拾昨天,但我们可以选择赢得或者输掉明天. Eve ...
- C++构造析构函数生命期及对象生命期
- Volley源码分析(一)RequestQueue分析
Volley源码分析 虽然在2017年,volley已经是一个逐渐被淘汰的框架,但其代码短小精悍,网络架构设计巧妙,还是有很多值得学习的地方. 第一篇文章,分析了请求队列的代码,请求队列也是我们使用V ...
- 修改Centos7的网卡ens32 改为eth0
1. 修改网卡配置文件 vim /etc/sysconfig/network-scripts/ifcfg-eno16777984 修改下面两个配置项 NAME=ens32 DEVICE=ens32 改 ...
- OC4J Configuration issue. /u01...dbhome_1/oc4j/j2ee/OC4J_DBConsole_orcl-db-01_orcl not found.
emctl start dbconsole 报错信息: OC4J Configuration issue. /u01/app/Oracle/product/11.2.0/dbhome_1/oc4j/j ...
- XML 读写（XmlDocument、XPathNavigator、XDocument）
内存中的 XML 处理 基于流的 XML 处理提供了最小的负载,但也只提供了最小的灵活性.在很多 XML 处理场景里,你不会在这么低的层次下工作. 对内存中的 XML 的处理则更加方便,但没有单一.标 ...
- aips初步设想
2018年5月10日星期四 目标:设计一个高并发,高性能,可扩展的现代化综合大前置机. 具备以下功能: 协议支持:http.socket.mq 报文支持:xml.json.8583 Tps:500笔/ ...