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异步编 ...
随机推荐
- PyQt4 对多个按钮进行同样的外观设置
实现的效果: 正常状态下:黑底(背景色),白字(前景色),圆角,向外凸起: 鼠标停留:背景和前景都反色: 鼠标按下:背景色变为淡蓝色,向内凹陷: class MyStyleSheet: @s ...
- django报错总结
问题一: dictionary update sequence element #1 has length 3; 2 is required 解决方法: 检查视图函数的render里传的字典
- 05-RARP: 逆地址解析协议
具有本地磁盘的系统引导时,一般是从磁盘上的配置文件中读取I P地址.但是无盘机,如X终端或无盘工作站,则需要采用其他方法来获得I P地址. 网络上的每个系统都具有唯一的硬件地址,它是由网络接口生产厂家 ...
- [UE4]自动旋转组件
- module 'pip' has no attribute 'pep425tags'
AMD64 import pip._internal print(pip._internal.pep425tags.get_supported()) 1 2 WIN32 import pip prin ...
- 批处理taskkill运行结束不掉程序以及停留问题
我原来就一句代码 TASKKILL /F /IM QQ.exe 保存为taskkill.bat,结果运行起来一直显示,但是没有结束掉进程,百度搜索才知道taskkill为系统关键字,不能命名为task ...
- 《Linux 性能及调优指南》3.1 确认瓶颈
翻译:飞哥 ( http://hi.baidu.com/imlidapeng ) 版权所有,尊重他人劳动成果,转载时请注明作者和原始出处及本声明. 原文名称:<Linux Performance ...
- SQL with(unlock)与with(readpast)
所有Select加 With (NoLock)解决阻塞死锁,在查询语句中使用 NOLOCK 和 READPAST 处理一个数据库死锁的异常时候,其中一个建议就是使用 NOLOCK 或者 READPAS ...
- js样式之渐变线
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- javascript中的未定义和未声明
我们在项目中,经常会定义一些变量(很多时候,定义过多的全局变量),当我们调用这些变量的时候,就会发生各种各样的突发状况. 看一个示例: var a; typeof a; typeof b; 很简单的一 ...