参考:阮一峰es6(http://es6.ruanyifeng.com/#docs/promise)

时间:2018-07-03

类型:个人笔记

解决的问题:异步编程的一种解决方案。

定义:Promise是一个保存着未来才会执行的事件的容器,创建后就会执行,但它有resolve和reject,作为未来会执行的事件,等Promise实例执行才会调用。

形式

 //定义一个Promise实例
const promise=new Promise(function(resolve,reject){
console.log('我是Promise内同步的');
setTimeout(function(){
console.log('我是定时器')
},1)
resolve();
})
//执行promise
promise.then(function(){
console.log('我是resolve')
});
console.log('我是同步的2')

分析:Promise创建,内部的同步会立即执行,所以输出:

“我是Promise内同步的”  “我是同步的2”

然后执行异步:一个定时器和promise实例的resolve,定时器本身就是在同步执行完才执行的,promise.then执行后定时器开始执行;

接着会输出:“我是resolve” “我是定时器”

写到这里其实和异步没有任何关系,所以来个异步请求开开眼

 //Promise干倒Ajax
const getJSON=function(url){
const anyName=new Promise(function(resolve,reject){
const xhr=new XMLHttpRequest();
xhr.open('GET',url);
xhr.onreadystatechange=handler;
xhr.send();
const handler = function() {
if(xhr.readyState!==4){
return;
}
if (xhr.status ===200) {
resolve(xhr.response)
}else{
reject(new Error(xhr.statusText))
}
}
})
return anyName;
}
getJSON('我是路径url').then(function(json){
console.log(json+'是Promise实例anyName执行成功resolve传过来的')
},function(error){
console.error('出错了',error)
})

胡乱分析:上述代码的目的是用Promise封装一个Ajax,为撒呢,假如有时候我们需要某一段代码的执行是在异步之后返回结果执行,这样写就不用把代码写在success或者失败里,把成功或者失败分别封装在resolve或者reject,then里的函数就是指这两个。

特点

1.Promise有三种状态:pending(在进行)resolve(成功)reject(失败)

2.状态一旦改变,就不会在变。除非你修改代码,刷新重新加载。(我很认真)

简记:(简单记忆)

  

const anyNamePromise = new Promise(function(resolve,reject){
***我是异步代码***;
//判断异步返回状态
if (status ===200 ){
//成功了呗,保存成功之后要执行的函数
resolve('我是要传的参数')
}else{
//失败了呗,保存失败要执行的函数
reject('没啥,哥告诉你咋错的')
}
})
//告诉你怎么调用resolve和reject,不然不是干瞪眼(不是打牌那个,不要打牌,娱乐也不要)
anyNamePromise.then(function('resolve传过来的'){
//少侠可以在这里写成功后的要执行的
},function('我也是传过来的'){
//不得不说你猜对了,这里是失败后要执行的
})
//骚等,会不会觉得这样写不太好看,再来一种写法,这个比较常用
anyNamePromise.then(function(){}).catch(function(error){})
//Promise东西好多啊,继续写,emmm

扩展

1.resolve的参数除了正常点的值外还可以是另一个Promise实例:

const p1=new Promise(function(resolve,reject){
setTimeout(()=>{reject(new Error('fail'))},2)
})
const p2=new Promise(function(resolve,reject){
setTimeout(()=>{resolve(p1)},2)
})
p2.then(function(){}).catch(function(){})

解析:p1的状态决定p2的状态;p2会等着p1状态变为成功或者失败再决定自己的状态;

2.then

then返回的是一个新的promise实例,then后还可以.then,前一个then return回的值可以被当前的then作为参数传递使用,前一个then的状态变化,决定后续执行成功还是失败的then

 getJSON('url')
.then(()=>{getJSON('newURl')})
.then(()=>{},()=>{})

3.catch

处理错误

p.then(()=>{})
.catch(()=>{});
等价于
p.then(()=>{},()=>{})

优先使用catch,因为catch也会把then执行的错误也捕获,catch后.catch会把前一个catch的错误捕捉;和try catch不同,Promise对象抛出的错误不会传递到外部,即不会有任何反应

 function getFn(){
return new Promise((resolve,reject)=>{
resolve(x+3)
})
}
getFn().then(()=>{console.log('haha')});
setTimeOut(()=>{console.log('jh')},4)

解析:Promise内部虽然没有声明x会报错,但并不影响后面定时器的执行,错误被Promise吃了

建议:Promise后跟着catch方法,处理Promise内部的错误。catch方法返回的还是个Promise对象,也可以接着调用then。

4.finally

2018引入的

promise
.then(()=>{})
.catch(()=>{})
.finally(()=>{})

finally最后都会被执行,不接受任何参数;

5.all

const p = Promise.all([p1,p2,p3])

解析:p1,p2,p3是Promise实例,p的状态仅当p1,p2,p3都为resolve才resolve,此时p1,p2,p3的值会组成数组返回给p;

只要有一个rejected,p就会变成rejected,此时第一个被rejected的值传回给p

const promises=[2,3,4].map(function(val){
return getJSON('url'+val)
})
Promise.all(promises)
.then(posts=>{console.log(posts)})
.catch((err)=>{console.log(err)})

若p1,p2,p3有catch,则返回均为resolve,因为若rejected则会被catch捕获,返回一个新的promise实例,状态resolved。

6.race

 const p=Promise.race([p1,p2,p3])
//例子
const p=Promise.race([
fetch('随意实例'),
new Promise((resolve,reject){
setTimeout(()=>{reject(new Error('hello'))},10)
})
]);
p
.then(console.log('hoi'))
.catch(console.error);

竞赛执行

9.应用

加载图片

const preImgLoad=function(url){
const promise = new Promise((resolve,reject)=>{
let img = new Image();
img.src=url;
img.onload=resolve;
img.onerror=reject;
})
}

  总结:promise里包含着一个异步执行的结果,成功或者失败,成功resolve和失败reject两个函数对应异步结果。一般.then后.catch捕获错误,Promise可以把错误吃了。race和all是多个Promise实例执行,race是竞赛,谁先执行完返回谁,all是返回最后结果,若都resolve,则返回结果放在数组里传给all,catch后返回的是一个新的Promise实例,其状态由catch本身决定。finally无论怎样都会执行的。

Promise笔记的更多相关文章

  1. 学习Promise笔记

    什么是Promise? MDN对Promise的定义:Promise对象用于异步操作,它表示一个尚未完成且预计在未来完成的异步操作. 在学习Promise之前得先了解同步与异步:JavaScript的 ...

  2. JS执行机制详解,定时器时间间隔的真正含义

     壹 ❀ 引 通过结果倒推过程是我们常用的思考模式,我在上一篇学习promise笔记中,有少量关于promise执行顺序的例子,通过倒推,我成功让自己对于js执行机制的理解一塌糊涂,js事件机制,事件 ...

  3. angular学习笔记(二十八-附2)-$http,$resource中的promise对象

    下面这种promise的用法,我从第一篇$http笔记到$resource笔记中,一直都有用到: HttpREST.factory('cardResource',function($resource) ...

  4. ES6笔记(7)-- Promise异步编程

    系列文章 -- ES6笔记系列 很久很久以前,在做Node.js聊天室,使用MongoDB数据服务的时候就遇到了多重回调嵌套导致代码混乱的问题. JS异步编程有利有弊,Promise的出现,改善了这一 ...

  5. Angular JS 学习笔记(自定义服务:factory,Promise 模式异步请求查询:$http,过滤器用法filter,指令:directive)

    刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...

  6. es6学习笔记--promise对象

    Promise对象是为了简化异步编程.解决回调地狱情况 Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可 ...

  7. HTML5学习笔记(十九):Lambda和Promise

    Lambda 在ES6的标准中称为Arrow Function(箭头函数).下面是一个简单的箭头函数: x => x * x 上面的定义和下面的代码定义效果一样: function (x) { ...

  8. JavaScript:学习笔记(9)——Promise对象

    JavaScript:学习笔记(9)——Promise对象 引入Promise Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大.如下面为基于回调函数的Ajax操作 ...

  9. Javascript - Promise学习笔记

    最近工作轻松了点,想起了以前总是看到的一个单词promise,于是耐心下来学习了一下.   一:Promise是什么?为什么会有这个东西? 首先说明,Promise是为了解决javascript异步编 ...

随机推荐

  1. JVM 专题

    未完待续>>> JVM - 整体结构 摘抄自:<分布式java应用基础与实践>-第三章 JVM - 内存 对上图各部分的概要解释: JVM - GC 详情参考: http ...

  2. JAVA代码模板总结

    静态工厂方法+服务提供者框架模板 构造器模板 事件通知模板 单元素枚举类型singleton模块 私有构造器不可实例化类模板

  3. mysql查询中取差集的问题

    有个场景 现在有个打卡的记录表(daka),记录了用户每天的打卡信息,同时还有个运动打卡表(sport_daka),如果用户有运动打卡则在运动打卡表里面记录. 现在要统计用户的每天的打开信息,包括运动 ...

  4. 【架构师之路】集群/分布式环境下5种session处理策略

    [架构师之路]集群/分布式环境下5种session处理策略   转自:http://www.cnblogs.com/jhli/p/6557929.html 在搭建完集群环境后,不得不考虑的一个问题就是 ...

  5. SCCM 2012 R2实战系列之二:前提工作准备

    在上一篇中,我们完成了SQL Server 2012的安装和配置.现在跟大家分享SCCM安装前的准备工作. 2.1 SCCM 2012 R2 准备工作 2.1.1 创建并分配System Manage ...

  6. 封装GridSearchCV的训练包

    import xgboost as xgb from sklearn.model_selection import GridSearchCV from sklearn.metrics import m ...

  7. HADOOP+SPARK+ZOOKEEPER+HBASE+HIVE集群搭建(转)

    原文地址:https://www.cnblogs.com/hanzhi/articles/8794984.html 目录 引言 目录 一环境选择 1集群机器安装图 2配置说明 3下载地址 二集群的相关 ...

  8. Centos7使用pxe安装KVM虚拟机

    Centos7使用pxe安装KVM虚拟机 一.安装服务所需的软件 [root@localhost ~]yum install nginx dhcp vsftpd syslinux -y [root@l ...

  9. Windows Server 2016 路由和远程访问

    本次实验是将Windows Server 2016 配置成一个路由器,为此网络上的客户端和服务器启用多重协议LAN到LAN,LAN到WAN,虚拟专用网络和网络地址转换路由服务.使用路由和远程访问需配置 ...

  10. python开发学习(元组、字符串、列表、字典深入)

    https://www.cnblogs.com/songqingbo/p/5129116.html(转载学习)