js关于promise的使用和注意事项

最新推荐文章于 2023-02-27 15:17:00 发布

戒骄戒躁TBE

最新推荐文章于 2023-02-27 15:17:00 发布

阅读量427

点赞数 1

CC 4.0 BY-SA版权

文章标签： js

本文链接：https://blog.csdn.net/weixin_45942049/article/details/108163311

本文深入讲解ES6中Promise的原理及应用，探讨如何避免回调地狱，实现更优雅的异步编程。介绍了Promise的状态变化、执行顺序及与AJAX结合使用的实践。

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

promise是ES6新增的异步编程解决方案为了解决回调函数嵌套过多的问题避免形成回调地狱
promise的异步是微任务
js代码的执行顺序同步程序–promise微任务–异步程序
promise在执行时有三种状态 pending resolve（fullfilled）rejected
对应着两种状态变化这两种状态变化由异步操作的结果决定
一旦状态发生改变就不再变化

var p = new Promise(function(resolve,reject){
	setTimeout(function(){
		resolve(10);  //这个参数10是给回调函数传递的数据
	},500)
})
p.then(function(data){ //成功时的回调
	console.log(data);
	return new Promise(function(resolve,reject){
		setTimeout(resolve,2000);
	})
},function(){console.log("aa")}) //失败时的回调
.then(function(){
	console.log('bb');
	return new Promise(function(resolve,reject){
		setTimeout(resolve,2000);
	})
}).then(function(){
	console.log('cc');
})

两个方法

var p1 = new Promise(function(resolve,reject){
    setTimeout(resolve,2000);
});
var p2 = new Promise(function(resolve,reject){
    setTimeout(resolve,3000);
});
var p3 = new Promise(function(resolve,reject){
    setTimeout(resolve,5000);
});
//all()  三个实例状态都发生改变 在执行then 以a时间最长的为准
//race() 三个实例状态有一个发生改变 就执行then 以时间最短的那个为准
Promise.all([p1,p2,p3]).then(()=>{
	console.log('aa');
})
Promise.race([p1,p2,p3]).then(()=>{
	console.log('bb');
})

个人总结

在使用promise的时候可以与ajax组合使用利用封装好的Ajax函数在原有的基础上改造返回一个promise实例并且本应该由ajax的success回调函数接受的下载数据可以放到resolve的参数里面在then的回调函数里去进行处理如下所示

function ajax(url){
	return new Promise((resolve,reject)=>{
		var xhr = window.XMLHttpRequest ? new XMLHttpRequest() :new ActiveXObject('Microsoft.XMLHTTP');
		xhr.open("get",url);
		xhr.send();
		xhr.onreadystatechange=()=>{
			if(xhr.readyState==4){
				if(xhr.status==200){
					var data = xhr.responseText;
					console.log(data);
					resolve(data);
				}
			}
		}
	});

}
       var p = new Promise(function (resolve, reject) {
            var xhr = new XMLHttpRequest();
            xhr.open('get', 'url');
            xhr.send();
            xhr.onreadystatechange = function () {
                if (xhr.readyState == 4 && xhr.status == 200) {
                    resolve(xhr.responseText);
                }
                setInterval(function () {
                    reject(new Error('连接超时'));
                }, 2000)
            }
        });
        p.then(function (data) {
            console.log(data)
        }).catch(function (err) {
            if (err) throw err;
        }).finally(function () {
            console.log('asdf')
        })