promise处理多个异步请求的用法 -- 多个异步请求顺序进行或同步进行，全部执行完后再继续

实际开发中，我们经常需要同时请求多个接口。比如页面初始化时，需要同时调用多个接口去获取不同模块的数据。各个模块的数据有可能是相互不关联的，也有可能某一模块的数据需要根据上一模块数据数据来获取。下面分两种情况分别介绍。

多个异步请求顺序进行

即在请求完接口1的数据data1之后，需要根据data1的数据，继续请求接口2，获取data2，然后根据data2的数据，继续请求接口3……

function myFun01() {
	console.log('以下内容是在myFun01中输出的')
	return new Promise((resolve, reject) => {
		// 模拟接口1异步请求数据
		setTimeout(() => {
			console.log('接口1请求数据完毕')
			resolve('接口1获取的数据传递给下一个方法，在myFun02中输出')
		}, 3000)
	})
}

function myFun02(data) {
	console.log('\n以下内容是在myFun02中输出的')
	return new Promise((resolve, reject) => {
		// 打印从接口1处接收到的数据
		console.log(data)
		// 模拟接口2异步请求数据
		setTimeout(() => {
			console.log('接口2请求数据完毕')
			resolve('接口2获取的数据传递给下一个方法，在myFun03中输出')
		}, 3000)
	})
}

function myFun03(data) {
	console.log('\n以下内容是在myFun03中输出的')
	return new Promise((resolve, reject) => {
		// 打印从接口2处接收到的数据
		console.log(data)
		// 模拟接口3异步请求数据
		setTimeout(() => {
			console.log('接口3请求数据完毕')
			resolve('接口3获取的数据传递给下一个方法')
		}, 3000)
	})
}

// 执行测试
myFun01().then(res => {
	return myFun02(res)
}).then(res => {
	return myFun03(res)
}).catch(err => {
	console.log(err)
})

运行后输出结果如下：

多个异步请求同步进行，全部执行完后再继续

function myFun01() {
	console.log('正在调用方法myFun01')
	return new Promise((resolve, reject) => {
		// 模拟接口1异步请求数据
		setTimeout(() => {
			console.log('接口1请求数据完毕，用时5S')
			resolve() //必须resolve或reject, 否则会认为该方法没有执行完成, 将无法执行最终的then或catch
		}, 5000)
	})
}

function myFun02() {
	console.log('正在调用方法myFun02')
	return new Promise((resolve, reject) => {
		// 模拟接口2异步请求数据
		setTimeout(() => {
			console.log('接口2请求数据完毕，用时3S')
			resolve() //必须resolve或reject, 否则会认为该方法没有执行完成, 将无法执行最终的then或catch
		}, 3000)
	})
}

function myFun03() {
	console.log('正在调用方法myFun03')
	return new Promise((resolve, reject) => {
		// 模拟接口3异步请求数据
		setTimeout(() => {
			console.log('接口3请求数据完毕，用时8S')
			resolve() //必须resolve或reject, 否则会认为该方法没有执行完成, 将无法执行最终的then或catch
		}, 8000)
	})
}

function myFun04() {
	console.log('正在调用方法myFun04')
	return new Promise((resolve, reject) => {
		// 模拟接口4异步请求数据
		setTimeout(() => {
			console.log('接口4请求数据完毕，用时6S')
			reject('接口4获取数据失败') //必须resolve或reject, 否则会认为该方法没有执行完成, 将无法执行最终的then或catch
		}, 6000)
	})
}

//执行测试 -- 全部成功获取时
Promise.all([myFun01(), myFun02(), myFun03()]).then(res => {
	console.log('所有异步请求均已成功加载完毕')
}).catch(err => {
	console.log(err)
})

//执行测试 -- 有数据获取失败时
Promise.all([myFun01(), myFun02(), myFun03(), myFun04()]).then(res => {
	console.log('所有异步请求均已成功加载完毕')
}).catch(err => {
	console.log(err)
})

全部成功获取时输出结果如下：

有数据获取失败时输出结果如下：