promise的用法

promise,为了解决ajax嵌套引起的地狱回调,代码层层嵌套会很难懂
语法

var p1=new Promise(function(){
	setTimeout(function(){
		// resolve('成功了');//这里会走向成功,then
		//reject('失败了');//这里会走向失败,catch
	},1000)
})
p1.then(function(res){
	console.log(res);
})
p1.catch(function(res){
	console.log(res);
})

其实,ajax也可以做到扁平,但是需要给下一个ajax取名字,并且看着很绕。
有了promise,省去了取名字,看着还直观,缺点是每次还有new一个promise
下面举一个实战的例子

// 吃饭
new Promise(function(resolve, reject){
	console.log('开始吃饭');
	setTimeout(function(){
		resolve();
		// reject('饭吃了一半,去加班了');
	},1000)
})
.then(function(){
	return new Promise(function(resolve, reject){
		console.log('吃饭完毕,开始刷碗');
		setTimeout(function(){
			resolve();
		},1000)
	})
})
.catch(function(res){
	console.log(res);
})
.then(function(){
	return new Promise(function(resolve, reject){
		console.log('刷碗完毕,出去玩');
		setTimeout(function(){
			console.log('玩累了,回家吃饭');
		},1000)
	})
})
Promise是一种异步编程的解决方案,它可以避免回调地狱,使得异步操作更加清晰和易于维护。Promise有三种状态:pending(进行中)、fulfilled(已成功)和rejected(已失败)。当Promise处于pending状态时,可以转换为fulfilled或rejected状态,一旦转换为其中一种状态,就不可再转换为其他状态。 Promise的基本用法如下: ```javascript const promise = new Promise((resolve, reject) => { // 异步操作 if (/* 异步操作成功 */) { resolve(value); // 将Promise状态设置为fulfilled,并将异步操作的结果传递给回调函数 } else { reject(error); // 将Promise状态设置为rejected,并将错误信息传递给回调函数 } }); promise.then((value) => { // 异步操作成功时的回调函数 }, (error) => { // 异步操作失败时的回调函数 }); ``` 另外,Promise还提供了一些静态方法,如Promise.resolve和Promise.reject,可以方便地创建已经处于fulfilled或rejected状态的Promise对象,以及Promise.all和Promise.race等方法,可以处理多个Promise对象的状态。 下面是一个使用Promise的例子,通过异步加载图片并在加载完成后显示图片: ```javascript function loadImageAsync(url) { return new Promise((resolve, reject) => { const img = new Image(); img.onload = function() { resolve(img); }; img.onerror = function() { reject(new Error('Could not load image at ' + url)); }; img.src = url; }); } loadImageAsync('https://example.com/image.jpg') .then((img) => { document.body.appendChild(img); }) .catch((error) => { console.error(error); }); ```
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值