ES6-Promise

最新推荐文章于 2024-07-28 21:06:01 发布

caicsama

最新推荐文章于 2024-07-28 21:06:01 发布

阅读量96

点赞数

分类专栏： ES6 文章标签： es6

原文链接：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise/then

版权

ES6 专栏收录该内容

22 篇文章 0 订阅

订阅专栏

Promise是异步编程的解决方案；获取异步操作消息
Promise实例有两个内部属性：
[[PromiseStatus]]：当前执行的状态
[[PromiseValue]]：resolved/rejected状态下不传值的时候，undefined;有参数的时候，等于参数值；(使用于所有Promise)

var promise=new Promise((resolve,reject)=>{
	console.log(1);
	resolve('异步回调');
})
promise.then(res=>{
	console.log(res);
})
console.log(promise);

在这里插入图片描述
主线程中解析promise，先打印1，遇到resolve(‘异步回调’)，事件放入任务队列中，交付主线程，执行console.log(promise);主线程完成，解决任务队列。

实例化Promise的时候，第一个参数是成功状态下的回调函数（需要占位），第二个参数是失败状态下的回调函数，可以省略

new Promise(reject=>{
	console.log(a);
	let a=1;
	reject(e); 
 }).then(null,e=>{
 	console.log(e);
})

在这里插入图片描述
虽然能够执行回调函数rejected的，但是此时的状态是resolved

var promise=new Promise(resolve=>{
	resolve('成功')
})
promise.then(res=>{
	return 1;
})
console.log(promise);

在这里插入图片描述

成功或失败的回调函数中未传递参数的时候，PromiseValue就等于undefined

var promise=new Promise(resolve=>{
	resolve();
})
promise.then(res=>{
	console.log('成功');
})

在这里插入图片描述

说明：
在实例promise，成功异步执行then中第一个参数内容，返回一个resolved状态的Promise对象
此时的promise的PromiseValue为‘成功’，也就是resolve的参数。

3种状态：Pending（正在执行）、Fulfilled（成功）、Rejected（失败）
特点：

1.状态不受外部影响。异步操作结果可以决定当前的状态，其他任何操作都没法改变当前的状态。

2.状态改变之后不会再变，任何时候都可以获取到结果。

执行顺序：在本轮事件循环完成之前，Promise的回调函数不会被调用
使用：
接收回调函数作为参数，resolve函数当状态从Pending->Resolved执行，并将异步结果作为参数传出去；reject函数状态从Pending- >Rejected的时候执行,将错误作为参数传出去

 new Promise(function(resolve,reject){
 	//resolve(value);
 	//reject(e);
 })

promise实现异步图片加载：

<!DOCTYPE html>
<html>
<head>
	<title>Promise</title>
	<meta charset="utf-8">
	
</head>
<body>
	<div id="box"></div>
	<script>
	function loadImageAsync(url){
	//返回一个异步Promise,回调函数作为参数，其中resolve成功的回调函数，reject失败的回调
	return new Promise((resolve,reject)=>{
		var img=new Image();
		//图片加载失败执行的操作
		img.onload=function(){
			resolve(img);
		}
		//图片加载出错，执行的操作
		img.onerror=function(){
			reject(new Error('Could not load Image'+url));
		}
		img.src=url;
	})
}
//使用then,接收两个参数，成功的回调，失败的回调
loadImageAsync('13.jpg').then(img=>{
	console.log('图片加载成功');
},e=>{
	console.log('图片加载失败啦啦啦啦');
});
	</script>
</body>

当Promise状态从pending->resolved的时候，异步执行resolve回调函数,也就是then的第一个参数
当Promise状态从pending->rejected的时候，异步执行的reject的回调函数，也就是then的第二个参数或者是catch

loadImageAsync('13.jpg').then(img=>{
	console.log('图片加载成功');
}).catch(()=>{
//当图片加载失败的时候，此时的状态是rejected,执行Promise的失败回调，也就是catch的回调函数
	console.log('图片加载出错啦!');
});

Promise相关方法	描述
Promise.prototype.then()	Promise实例状态改变，resolved/rejected状态下的操作
Promise.prototype.catch()	Promise实例中rejected或捕获其他错误（之前的）
Promise.all()	将多个Promise实例包装成一个
Promise.race()	多个Promise实例包装成一个
Promise.resolve()	实例状态为resolved的Promise对象
Promise.reject()	实例状态为rejected的Promise对象

使用：
Promise.prototype.then(resolveCallback,rejectCallback)
参数：
参数1：Resolved状态下执行的函数
参数2：Rejected状态下执行的函数（可选）
**返回：**Promise对象，可以实现链式调用

new Promise(resolve=>{
	resolve();
}).then(res=>{
	console.log(1);
}).then(res=>{
	console.log(2);
})

在这里插入图片描述
Promise.prototype.catch(error)
参数：Rejected状态下执行的函数/then函数中发生的错误回调函数
返回：Promise对象

new Promise(reject=>{
console.log(a);
let a=1;
	reject();
}).catch(e=>{
	console.log(e);
})

在这里插入图片描述
Promise.all()
数组作为参数
可能会和and比较像
情况1：传入的Promise实例状态都是resolved，组成数组，传给resolved回调函数

var promise=[1,2,3,4,4].map(val=>{
	return val*2;
})
Promise.all(promise).then(res=>{
	let sum=0;
	for(var i of res){
		sum+=i;
	}
	console.log(sum)
})

在这里插入图片描述
情况2：传入的Promise实例中包含了rejected状态，将第一个出现rejected状态的Promise实例，返回传递给回调函数

Promise.race()
数组作为参数，参数中将第一个``状态改变的Promise传入调用回调函数，执行（then中执行）

let s1=new Promise(resolve=>{
		setTimeout(()=>resolve(1),100)
	})
let s2=new Promise(resolve=>{
		setTimeout(()=>resolve(2),10)
	})
Promise.race([s1,s2]).then(res=>{
	console.log(res);
})

在这里插入图片描述
任务队列中没有别的任务，s2在10毫秒的之后状态改变，s1在100毫秒的时候，状态改变；s2的状态先改变
Promise.reject()
生成一个状态为Rejected的Promise实例

Promise.reject('失败')
等价于
new Promise(resolve,reject=>reject('失败'))

Promise.resolve()
生成一个状态为Resolved的Promise的实例

Promise.resolve('成功')
等价于
new Promise((resolve,reject)=>{
	resolve('成功');
})

立即resolve的Promise在事件循环的结束时调用
setTimeout在本次事件循环结束，下一轮事件循环开始之前执行

var protemp=new Promise((resolve,reject)=>{
	resolve(1);
})
var restemp=protemp.then(res=>{
	console.log('异步传入的值是:'+res);
	return res;
})
console.log(restemp);
setTimeout(()=>console.log(restemp));