Promise

最新推荐文章于 2022-06-30 15:19:50 发布

我土豆去哪了

最新推荐文章于 2022-06-30 15:19:50 发布

阅读量95

点赞数

分类专栏：其他文章标签： vue 前端 ajax js

本文链接：https://blog.youkuaiyun.com/weixin_44233889/article/details/119507973

版权

其他专栏收录该内容

13 篇文章

订阅专栏

本文介绍了JavaScript中回调地狱的问题，并通过引入Promise来解决这种问题。使用Promise可以将异步操作链式处理，避免了层层嵌套。接着讲解了Promise.all的用法，它用于在所有Promise实例都解析后执行回调，提供了并行获取多个接口数据的高效方式。

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

回调地狱

// 回调地狱（多层请求嵌套）
$.ajax({
	url: 'http://xxx',
	success: function(res){
		console.log(res);
		$.ajax({
			url: 'http://xxx?id=' + res.list[0].id,
			success: function(res) {
				console.log(res);
			}
		})
	}
})

Promise

// Promise用于解决回调地狱
new Promise(function(resolve, reject) {
	$.ajax({
		url: 'http://xxx',
		success: function(res){
			resolve(res);
		}
	})
}).then(function(data) {
	return new Promise(function(resolve, reject) {
		$.ajax({
			url: 'http://xxx?id=' + data.list[0].id,
			success: function(res) {
				resolve(res);
			}
		})
	})
}).then(function(data) {
	console.log(data);
})

Promise.all

// Promise.all用于下面逻辑需要同时获取多个接口的数据再处理，比同步获取多个接口数据的速度更快
Promise.all([
	new Promise(function(resolve, reject) {
		$.ajax({
			url: 'http://xxx',
			success: function(res){
				resolve(res);
			}
		})
	}),
	new Promise(function(resolve, reject) {
		$.ajax({
			url: 'http://xxx',
			success: function(res){
				resolve(res);
			}
		})
	})
]).then(function(results) {
	console.log(results);
})