参考:阮一峰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. PyQt4 对多个按钮进行同样的外观设置

    实现的效果: 正常状态下:黑底(背景色),白字(前景色),圆角,向外凸起: 鼠标停留:背景和前景都反色: 鼠标按下:背景色变为淡蓝色,向内凹陷:      class MyStyleSheet: @s ...

  2. django报错总结

    问题一: dictionary update sequence element #1 has length 3; 2 is required 解决方法: 检查视图函数的render里传的字典

  3. 05-RARP: 逆地址解析协议

    具有本地磁盘的系统引导时,一般是从磁盘上的配置文件中读取I P地址.但是无盘机,如X终端或无盘工作站,则需要采用其他方法来获得I P地址. 网络上的每个系统都具有唯一的硬件地址,它是由网络接口生产厂家 ...

  4. [UE4]自动旋转组件

  5. module 'pip' has no attribute 'pep425tags'

    AMD64 import pip._internal print(pip._internal.pep425tags.get_supported()) 1 2 WIN32 import pip prin ...

  6. 批处理taskkill运行结束不掉程序以及停留问题

    我原来就一句代码 TASKKILL /F /IM QQ.exe 保存为taskkill.bat,结果运行起来一直显示,但是没有结束掉进程,百度搜索才知道taskkill为系统关键字,不能命名为task ...

  7. 《Linux 性能及调优指南》3.1 确认瓶颈

    翻译:飞哥 ( http://hi.baidu.com/imlidapeng ) 版权所有,尊重他人劳动成果,转载时请注明作者和原始出处及本声明. 原文名称:<Linux Performance ...

  8. SQL with(unlock)与with(readpast)

    所有Select加 With (NoLock)解决阻塞死锁,在查询语句中使用 NOLOCK 和 READPAST 处理一个数据库死锁的异常时候,其中一个建议就是使用 NOLOCK 或者 READPAS ...

  9. js样式之渐变线

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...

  10. javascript中的未定义和未声明

    我们在项目中,经常会定义一些变量(很多时候,定义过多的全局变量),当我们调用这些变量的时候,就会发生各种各样的突发状况. 看一个示例: var a; typeof a; typeof b; 很简单的一 ...