es6中Promise的使用_es6-promise插件 cdn引入-CSDN博客

博客围绕Promise消除异步操作展开，介绍了Promise的使用，即能用同步方式书写异步代码，还提及了使用方法并举例，展示了有Promise后异步代码的书写形式。

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

Promise—消除异步操作

Promise的使用：用同步一样的方式，来书写异步代码

使用方法及举例：

<script>
	let p1 = new Promise(function (resolve, reject){		// 创建一个Promise对象
		// resolve  成功了
		// reject  失败了
		
		$.ajax({
			url: 'arr.txt',
			dataType: 'json',
			success(arr){
				resolve(arr);
			},
			error(err){
				reject(err);
			}
		})
	});
	
	let p2 = new Promise(function (resolve, reject){
		// resolve  成功了
		// reject  失败了
		
		$.ajax({
			url: 'json.txt',
			dataType: 'json',
			success(arr){
				resolve(arr);
			},
			error(err){
				reject(err);
			}
		})
	});
	
	Promise.all([		// Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。
		p1, p2
	]).then(function (arr){		//当成功的时候调用第1个函数
		let [res1, res2] = arr;
		alert('全都成功了');
		alert(res1);
		alert(res2);
	}, function (err){		//当失败的时候调用第2个函数
		alert('至少有一个失败了'+err);	
		console.log(err)
	});
	
	p.then(function (arr){		//当成功的时候调用第1个函数
		alert('成功'+arr);
	}, function (err){		//当失败的时候调用第2个函数
		alert('失败'+err);	
		console.log(err)
	});
	</script>

其上面代码可以优化如下：

<script>
function createPromise(url){
	return new Promise(function (resolve, reject){
	// resolve  成功了
	// reject  失败了
	
		$.ajax({
			url,	//url: url,
			dataType: 'json',
			success(arr){
				resolve(arr);
			},
			error(err){
				reject(err);
			}
		})
	});
}

Promise.all([
	createPromise('arr.txt'),
	createPromise('json.txt')
]).then(function (arr){		//当成功的时候调用第1个函数
	let [res1, res2] = arr;
	alert('全都成功了');
	alert(res1);
	alert(res2);
}, function (err){		//当失败的时候调用第2个函数
	alert('至少有一个失败了'+err);	
	console.log(err)
});

</script>

Promise的运用

<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.5.1/jquery.js"></script>
	</head>
	<body>
	</body>
	<script>
		Promise.all([
			$.ajax({
				url: 'arr.txt',
				dataType: 'json'
			}),
			$.ajax({
				url: 'json.txt',
				dataType: 'json'
			}),
		]).then(function (results){
			let [arr, json] = results;		// 解构赋值
			alert('成功了');
			console.log(arr, json);
		}, function (){
			alert('失败了');
		})
	</script>
</html>

在这里插入图片描述

有了Promise之后的异步大概是这样写的：

Promise.all([$.ajax(), $.ajax()]).then(results=>{
	// 成功了
}, err=>{
	// 失败了
});