Promise异步编程总结

最新推荐文章于 2024-07-31 13:44:49 发布

ERROR!!!!!!

最新推荐文章于 2024-07-31 13:44:49 发布

阅读量192

点赞数 1

分类专栏： JavaScript 文章标签： ajax promise javascript

本文链接：https://blog.csdn.net/liujiebahuang/article/details/109318844

版权

JavaScript 专栏收录该内容

20 篇文章

订阅专栏

本文介绍如何使用ES6的Promise来简化异步编程，避免回调地狱现象。通过对比传统的Ajax请求和使用Promise封装的Ajax请求，展示Promise的简洁性和强大功能。

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

概述

Promise => ES6新语法，处理异步编程。
多次异步调用其结果出现的顺序无法控制，异步调用确实存在依赖关系就需要嵌套，多层嵌套会产生回调地狱。

三种异步编程：
一、定时任务 setTimeout & setInterval
二、Ajax
三、事件函数

Ajax

一般的请求：

$.ajax({
	url:'*****',
	success:function(data){
		console.log(data)
	}
})

回调地狱：

$.ajax({//1
	url:'*****',
	success:function(data){
		console.log(data)
		$.ajax({//2
			url:'*****',
			success:function(data){
				console.log(data)
				$.ajax({//3
					url:'*****',
					success:function(data){
						console.log(data)
						//......回调地狱出现
					}
				})
			}
		})
	}
})

Promise

优点：
1、解决回调地狱问题
2、API简洁易操控

promise基本用法

var p = new Promise(function(resolve,reject){
	//具体异步任务：成功时调用resolve()，失败时调用reject()
	setTimeout(function(){
		var aaa = true;
		if(aaa){
			resolve('success!!')
		}else{
			reject('fail!!')
		}
	},1000)
	
})
p.then(function(data){
	//从resolve处得到成功结果
	console.log(data)//打印出success
},function(info){
	//从reject处得到错误信息
	console.log(info)//当aaa为false,在这里打印
})

用promise处理一下Ajax

function queryData(url){
	return new Promise(function(resolve,reject){
		var xhr = new XMLHttpRequest();//定义一个实例对象
		xhr.onreadystatechange = function(){//指定一个回调函数
			if(xhr.readyState != 4) return;
			if(xhr.readyState == 4 && xhr.status == 200){
				resolve(xhr.responseText);
			}else{
				reject('错误');
			}
		}
		xhr.open('get',url);
		xhr,send(null);
	})
}
//1 一次请求
queryData('*******url').then(function(data){
	console.log(data);
},function(info){
	console.log(info);
})

发送多次Ajax请求

基于上

//2 链式操作
queryData('*******url1').then(function(data){
	console.log(data);
	return queryData('*******url2').then(function(data){
		console.log(data);
	})
}).then(function(data3){
	return queryData('*******url3').then(function(data){
		console.log(data);
	})
})
...以此类推

then参数函数返回值

1、返回Promise实例对象，返回的实例对象会调用下一个then;
2、返回一个普通值，直接传给下个then

基于以上封装：

queryData('*******url1').then(function(data){
	console.log(data);
	return queryData('*******url2');
}).then(function(data){
	console.log(data)
	return new Promise(function(resolve,reject){
		setTimeout(function(){
			resolve('哇哈哈')
		},1000)
	})
})
.then(function(data){
	console.log(data);//打印出‘哇哈哈’
	return '农夫山泉'
})
.then(function(data){
	console.log(data);//打印出‘农夫山泉’
})
......以此类推

Promise常用API

1、实例方法
.then() 获取成功结果resolve
.catch() 获取异常结果reject
.finally() 获取全部（不论成败）

敲不动键盘了，自己体会吧

2、对象方法
Promise.all()
并发处理多个异步任务，所有任务完成才能得到结果
Promise.race()
并发处理多个异步任务，其中一个任务完成就能得到结果

//数组中是一系列的实例对象，每个实例对象分别完成一个异步操作
var p1 = queryData(url1);
var p2 = queryData(url2);
var p3 = queryData(url3);
Promise.all([p1,p2,p3]).then((result) => {
	console.log(result)；//拿到p1,p2,p3所有返回结果[p1,p2,p3]
})
Promise.race([p1,p2,p3]).then((result) => {
	console.log(result)；//只得到最快返回结果，但是其他未返回的依旧在执行，并不会中止
})