promise基础

最新推荐文章于 2025-01-17 19:26:45 发布

张哈哈zhh

最新推荐文章于 2025-01-17 19:26:45 发布

阅读量111

点赞数

文章标签： js javascript

本文链接：https://blog.csdn.net/weixin_44383261/article/details/117337563

版权

promise是ES6引进的异步编程解决方案，语法上是一个构造函数，可以实例化对象，封装异步操作，获取成功或失败的结果，优点是可以解决回调地狱的问题。

promise初体验：

<body>
	<button type="button" id="btn">抽奖</button>
	<script type="text/javascript">
	    const btn=document.getElementById("btn");
		btn.onclick=function(){
			const p=new Promise((resolve,reject)=>{
				setTimeout(()=>{
					let n=parseInt(Math.random()*100)
					if(n<=30){
						resolve(n);
					}else{
						reject(n);
					}
				},1000);
			});
			p.then((value)=>{
				alert("恭喜你中了五百万,您的中奖数字为："+value)
			},(reason)=>{
				alert("再接再厉,您的号码为"+reason)
			})
		}
	</script>
</body>

resolve和reject可以改变promise实例的状态，resolve是成功时的调用，reject是失败时的调用，resolve执行then的第一个方法，reject执行then的第二个方法。then的返回结果也是一个promise。

promise封装Ajax：

<body>
	<button type="button" id="btn">点击</button>
	<script type="text/javascript">
		const btn = document.getElementById("btn");
		btn.onclick = function() {
			const p = new Promise((resolve, reject) => {
				// 创建对象
				const xhr = new XMLHttpRequest();
				// 初始化
				xhr.open('GET', 'http://127.0.0.1:8848');
				// 发送
				xhr.send();
				// 绑定事件,处理结果
				xhr.onreadystatechange = function() {
					if (xhr.readyState == 4) {
						if (xhr.status >= 200 && xhr.status < 300) {
							// 输出响应体
							resolve(xhr.response);
						} else {
							reject(xhr.status);
						}
					}
				}
			})
			p.then((value) => {
				console.log(value);
			}, (reason) => {
				console.log(reason);
			})
		}
	</script>
</body>

promise的属性：

（1）PromiseState：promise的状态，pending->未决定的，resolved->成功，rejected->失败。
（2）PromiseResult：保存着对象成功/失败的结果

promise的API：

（1）构造函数Promise(excutor){}
excutor我们称之为执行器，它是个函数（resolve，reject）=> { }，resolve是内部定义成功时的回调，reject是内部定义失败时的回调。
excutor会在Pomise内部立即同步调用，异步操作在执行器中执行。
（2）Promise.prototype.then方法：(onResolved,onRejected)=>{ }，onResolved是成功的回调函数-----（value）=>{ }，onRejected是失败的回调函数-----（reason）=>{ }。
then会返回一个新的Promise对象
（3）Promise.prototype.catch方法：(onRejected)=>{ }，onRejected是失败的回调函数-----（reason）=>{ }。catch内部是用then实现的。then能传两个回调，一个成功一个失败，catch只能传失败。
（4）Promise.resolve方法：（value）=>{ }，value是成功的数据或者promise对象，返回一个成功/失败的promise对象。
与前边的方法不同，它是属于Promise函数对象的，而不是属于实例对象。

<body>
	<script type="text/javascript">
		let p=Promise.resolve(123);
		console.log(p)
	</script>
</body>

在这里插入图片描述
状态是成功，PromiseResult保存了成功的结果。
如果传入的参数不是Promise类型的对象，则返回结果为成功的promise对象；如果传入的参数是Promise类型的对象，则参数的结果决定了resolve的结果。

let pp=Promise.resolve(new Promise((resolve,reject)=>{
	// resolve('ok');
	reject('error');
}))
console.log(pp);//error

在这里插入图片描述
报错是因为我们有一个失败的promise，但是没有对失败进行处理：

pp.catch(reason=>{
	console.log(reason)
})

在这里插入图片描述
（5）Promise.reject方法：（reason）=>{ }，返回一个失败的promise对象。与resolve相同，它也属于Promise函数对象的，而不是属于实例对象。

let p=Promise.reject(123);
console.log(p)

在这里插入图片描述
就算是传入的参数是一个成功的promise对象，返回值也是失败的promise：

let pp=Promise.reject(new Promise((resolve,reject)=>{
	resolve('ok');
}))
console.log(pp)

在这里插入图片描述
（6）Promise.all方法：（promise）=>{ }，promise是个数组，包含了很多个promise，只有数组中所有的promise都为成功的，all返回结果才是成功的，有一个失败，返回结果就失败。

let p1=new Promise((resolve,reject)=>{
	resolve('ok');
})
let p2=Promise.resolve('success');
let p3=Promise.resolve('okk')
const result=Promise.all([p1,p2,p3]);
console.log(result);

在这里插入图片描述

let p1=new Promise((resolve,reject)=>{
	resolve('ok');
})
let p2=Promise.reject('default');
let p3=Promise.resolve('okk')
const result=Promise.all([p1,p2,p3]);
console.log(result);

在这里插入图片描述
失败的结果值是p2的结果值。
（7）Promise.race方法：（promise）=>{ }，promise是包含了多个promise的数组，race返回一个新的promise，第一个完成的promise的结果状态就是最终的结果状态。

let p1=new Promise((resolve,reject)=>{
	resolve('ok');
})
let p2=Promise.reject('default');
let p3=Promise.resolve('okk')
const result=Promise.race([p1,p2,p3]);
console.log(result);