Promise笔记
参考:阮一峰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笔记的更多相关文章
- 学习Promise笔记
什么是Promise? MDN对Promise的定义:Promise对象用于异步操作,它表示一个尚未完成且预计在未来完成的异步操作. 在学习Promise之前得先了解同步与异步:JavaScript的 ...
- JS执行机制详解,定时器时间间隔的真正含义
壹 ❀ 引 通过结果倒推过程是我们常用的思考模式,我在上一篇学习promise笔记中,有少量关于promise执行顺序的例子,通过倒推,我成功让自己对于js执行机制的理解一塌糊涂,js事件机制,事件 ...
- angular学习笔记(二十八-附2)-$http,$resource中的promise对象
下面这种promise的用法,我从第一篇$http笔记到$resource笔记中,一直都有用到: HttpREST.factory('cardResource',function($resource) ...
- ES6笔记(7)-- Promise异步编程
系列文章 -- ES6笔记系列 很久很久以前,在做Node.js聊天室,使用MongoDB数据服务的时候就遇到了多重回调嵌套导致代码混乱的问题. JS异步编程有利有弊,Promise的出现,改善了这一 ...
- Angular JS 学习笔记(自定义服务:factory,Promise 模式异步请求查询:$http,过滤器用法filter,指令:directive)
刚学没多久,作了一个小项目APP,微信企业号开发与微信服务号的开发,使用的是AngularJS开发,目前项目1.0版本已经完结,但是项目纯粹为了赶工,并没有发挥AngularJS的最大作用,这几天项目 ...
- es6学习笔记--promise对象
Promise对象是为了简化异步编程.解决回调地狱情况 Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果.从语法上说,Promise 是一个对象,从它可 ...
- HTML5学习笔记(十九):Lambda和Promise
Lambda 在ES6的标准中称为Arrow Function(箭头函数).下面是一个简单的箭头函数: x => x * x 上面的定义和下面的代码定义效果一样: function (x) { ...
- JavaScript:学习笔记(9)——Promise对象
JavaScript:学习笔记(9)——Promise对象 引入Promise Primose是异步编程的一种解决方案,比传统的解决方案回调函数和事件更加合理和强大.如下面为基于回调函数的Ajax操作 ...
- Javascript - Promise学习笔记
最近工作轻松了点,想起了以前总是看到的一个单词promise,于是耐心下来学习了一下. 一:Promise是什么?为什么会有这个东西? 首先说明,Promise是为了解决javascript异步编 ...
随机推荐
- 对poi-Excel导入的浅层理解
本文即将对POI方式导入excel文件最核心的步骤予以说明,为的是简单,也是为了阐明文件导入的原理. 文件导入有一个很明显的线索: 1.首先是我们知道硬盘中的文件,即:文件对象File file 2. ...
- 我的Netty笔记
pom.xml <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi="http://www.w ...
- ubuntu16.04 彻底卸载MySQL
以MySQL- 5.7.18为例: sudo apt-get autoremove --purge mysql-server-5.7 #sudo apt-get remove mysql-server ...
- js实现照片墙效果
本次要实现的是一个照片墙的效果,如下图,很多图片随机的摆放在窗口中,当点击到某一张的时候,该张图片出现出现在窗口的水平垂直居中的位置. 首先,我们需要简单的结构处理图片,为了方便操作,引用了一个js库 ...
- Service Mesh简介
1.1 Service Mesh 1.1.1 什么是Service Mesh Service Mesh是最近才兴起的一个名词,最早在2016年9月29日由开发Linkerd的Buoyant公司首次 ...
- [UE4]widget事件:On Mouse Enter、On Move Leave、Set Color And Opactiy
只要是widget对象,都具有On Mouse Enter.On Move Leave事件
- [UE4]Text Block文字字体偏移
这样看起来就像是真正的垂直居中对齐了.
- log4j自带的两个类MDC和NDC作用以及用途
原文转载至: https://blog.csdn.net/joeyon/article/details/52982330 要想实现获取IP并显示在log中必须先了解log4j自带的两个类MDC和NDC ...
- remmina从linux远程桌面连接windows失败解决方法
删除如下文件,重新连接 rm ~/.freerdp/known_hosts
- hive on spark的坑
原文地址:http://www.cnblogs.com/breg/p/5552342.html 装了一个多星期的hive on spark 遇到了许多坑.还是写一篇随笔,免得以后自己忘记了.同事也给我 ...