js多个网络请求都完成后再对数据进行处理

前言

在开发中，我们可能碰到这样的需求，必须等多个网络请求都请求完毕以后，再对他们的返回数据进行处理，这个时候我们应该怎么做呢？

1、变量判断

let isResult1 = false;
let isResult1 = false;

// 请求一
$ajax({
    
    
	url: '',
	success() {
    
    
		isResult1 = true;
		handleResult();
	}
})

// 请求二
$ajax({
    
    
	url: '',
	success() {
    
    
		isResult2 = true;
		handleResult()
	}
})

function handleResult() {
    
    
	if(isResult1 && isResult1) {
    
    
		// 这个时候能保证这两个请求都结束了，再进行数据处理
		...
	}
}

2、Promise.all()

Promise.all方法接受一个参数，这个参数是数组类型的，数组的每一项都是一个promise对象

Promise.all([
	new Promise((resolve, reject) => {
    
    
		$ajax({
    
    
			url: 'url1',
			success(data) {
    
    
				resolve(data)
			}
		})
	}),
	new Promise((resolve, reject) => {
    
    
		$ajax({
    
    
			url: 'url2',
			success(data) {
    
    
				resolve(data)
			}
		})
	})
]).then(results => {
    
    
	// 这个results是个数组，里面分别是第一个请求的返回结果，第二个请求的返回结果，第三个....
})

我们可以用延迟函数进行网络请求的模拟：

Promise.all([
	new Promise((resolve, reject) => {
    
    
		setTimeout(() => {
    
    
			resolve(111)
		}, 1000)
	}),
	new Promise((resolve, reject) => {
    
    
		setTimeout(() => {
    
    
			resolve(222)
		}, 2000)
	})
]).then(results => {
    
    
	// 这个results是个数组，里面分别是第一个请求的返回结果，第二个请求的返回结果，第三个....
	console.log(results); // [111, 222]
})

具体的Promise对象可以看我之前写的一篇讲解博客：点我