Promise的认识

本文深入解析Promise对象的概念,探讨其如何简化异步编程,提供代码示例展示Promise的基本使用,包括处理Ajax请求、发送多个请求并确保顺序执行,以及介绍Promise的常用API如then、catch、finally、all和race。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

Promise的概述
Promise是异步编程的一种解决方式,从语法上讲,Promise是一个对象,它可以获取异步操作的消息。
由于异步操作存在返回的顺序不确定,如果想要返回顺序确定的话就需要嵌套(回调地狱),Promise就可以解决这一个问题,并且Promise对象提供了简洁的API,使异步操作更加简单
Promise的用法

<script type="text/javascript">
	var p = new Promise(function(resolve,reject){
		setTimeout(function(){
			var flag = false;
			if(flag){
				//正常情况得到真实的数据
				resolve('hello');
			}else{
				//异常的情况
				reject('出错了')
			}
		},100);
	})
	p.then(function(data){
		console.log(data)
	},function(info){
		console.log(info)
	})
</script>

Promise处理Ajax请求

	function queryData(url){
		var p = new Promise(function(resolve,reject){
			var xhr = new XHTMLHttpRequest();
			xhr.onreadyStatechange = function(){
				if(xhr.readyState != 4) return;
				if(xhr.readyState ==4 && xhr.state == 200) {
					resolve(xhr.responseText);
				}else{
					reject(error)
				}
			};
			xhr.open('get',url);
			xhr.send(null);
		});
		return p;
	}
	queryData('url地址').then(function(data){
		console.log(data)
	},function(info){
		console.log(info)
	})

Promise发送多个ajax请求并且保证顺序

function queryData(url){
		var p = new Promise(function(resolve,reject){
			var xhr = new XHTMLHttpRequest();
			xhr.onreadyStatechange = function(){
				if(xhr.readyState != 4) return;
				if(xhr.readyState ==4 && xhr.state == 200) {
					resolve(xhr.responseText);
				}else{
					reject(error)
				}
			};
			xhr.open('get',url);
			xhr.send(null);
		});
		return p;
	}
	// 发送多个ajax请求并且保证顺序
	queryData('url地址').then(function(data){
		console.log(data);
		return queryData('url地址');
	}).then(function(data){
		console.log(data);
		return queryData('url地址');
	}).then(function(data){
		console.log(data);
	});

Promise的常用API

  • 实例方法

1.p.then:得到异步任务的正确结果
2.p.catch:获取异常信息
3.p.finally:成功与否都会执行(可以用于销毁一些不用的函数)

  • 对象方法
    promise.all()并发处理多个异步任务,所有任务都执行完成才能得到结果
    promise.race()并发处理多个异步任务,只要有一个任务完成就能得到结果
//promise.all()
function queryData(url){
		return new Promise(function(resolve,reject){
			var xhr = new XHTMLHttpRequest();
			xhr.onreadyStatechange = function(){
				if(xhr.readyState != 4) return;
				if(xhr.readyState ==4 && xhr.state == 200) {
					resolve(xhr.responseText);
				}else{
					reject(error)
				}
			};
			xhr.open('get',url);
			xhr.send(null);
		});
	}

	var p1 = queryData('地址1')
	var p2 = queryData('地址2')
	var p3 = queryData('地址3')
	Promise.all([p1,p2,p3]).then(function(result){
		console.log(result)
	})
//promise.race()
function queryData(url){
		return new Promise(function(resolve,reject){
			var xhr = new XHTMLHttpRequest();
			xhr.onreadyStatechange = function(){
				if(xhr.readyState != 4) return;
				if(xhr.readyState ==4 && xhr.state == 200) {
					resolve(xhr.responseText);
				}else{
					reject(error)
				}
			};
			xhr.open('get',url);
			xhr.send(null);
		});
	}

	var p1 = queryData('地址1')
	var p2 = queryData('地址2')
	var p3 = queryData('地址3')
	Promise.race([p1,p2,p3]).then(function(result){
		console.log(result)
	})
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值