参考:阮一峰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. 对poi-Excel导入的浅层理解

    本文即将对POI方式导入excel文件最核心的步骤予以说明,为的是简单,也是为了阐明文件导入的原理. 文件导入有一个很明显的线索: 1.首先是我们知道硬盘中的文件,即:文件对象File file 2. ...

  2. 我的Netty笔记

    pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w ...

  3. ubuntu16.04 彻底卸载MySQL

    以MySQL- 5.7.18为例: sudo apt-get autoremove --purge mysql-server-5.7 #sudo apt-get remove mysql-server ...

  4. js实现照片墙效果

    本次要实现的是一个照片墙的效果,如下图,很多图片随机的摆放在窗口中,当点击到某一张的时候,该张图片出现出现在窗口的水平垂直居中的位置. 首先,我们需要简单的结构处理图片,为了方便操作,引用了一个js库 ...

  5. Service Mesh简介

    1.1 Service Mesh   1.1.1 什么是Service Mesh Service Mesh是最近才兴起的一个名词,最早在2016年9月29日由开发Linkerd的Buoyant公司首次 ...

  6. [UE4]widget事件:On Mouse Enter、On Move Leave、Set Color And Opactiy

    只要是widget对象,都具有On Mouse Enter.On Move Leave事件

  7. [UE4]Text Block文字字体偏移

    这样看起来就像是真正的垂直居中对齐了.

  8. log4j自带的两个类MDC和NDC作用以及用途

    原文转载至: https://blog.csdn.net/joeyon/article/details/52982330 要想实现获取IP并显示在log中必须先了解log4j自带的两个类MDC和NDC ...

  9. remmina从linux远程桌面连接windows失败解决方法

    删除如下文件,重新连接 rm ~/.freerdp/known_hosts

  10. hive on spark的坑

    原文地址:http://www.cnblogs.com/breg/p/5552342.html 装了一个多星期的hive on spark 遇到了许多坑.还是写一篇随笔,免得以后自己忘记了.同事也给我 ...