Promise.all和Promise.race的区别和使用

Posted 2023-05-09

参考技术A 1. Promise.all

Promise.all可以将多个实例组装成一个新的实例，成功的时候返回一个成功数组，失败的时候则返回最先被reject失败状态的值

比如当一个页面需要在很多个模块的数据都返回回来时才正常显示，否则loading

比如当数组里的P1，P2都执行完成时，页面才显示。

值得注意的是，返回的数组结果顺序不会改变，即使P2的返回要比P1的返回快，顺序依然是P1，P2

2. Promise.race

race是赛跑的意思，也就是说Promise.race([p1, p2, p3])里面的结果哪个获取的快，就返回哪个结果，不管结果本身是成功还是失败

一般用于和定时器绑定，比如将一个请求和一个三秒的定时器包装成Promise实例，加入到race队列中，请求三秒中还没有回应时，给用户一些提示或一些相应的操作。

手写Promise.all和Promise.race

手写Promise.all和Promise.race

Promise.all

function promiseAll (promises) {
	if (!Array.isArray(promises)) {
		throw new Error ("promises must to be an array!!!");
	}
	return new Promise (function (resolve, reject) {
		let promiseNum = promises.length;
		let resolvedCount = 0;
		let resolveValues = new Array(promiseNum);
		try {
			for (let i = 0; i < promiseNum; i++) {
                promises[i].then(function (value) {
                    resolveValues[i] = value;
                    if (++resolvedCount === promiseNum) {
                        resolve(resolveValues);
                    }
                })
		} catch (error) {
			reject(error);
		}
	})
}

Promise.race

function promiseRace(promise) {
	if (!Array.isArray (promises)) {
		throw new Error ("promises must be an array!!!");
	
	}
	let resolved = false;
	return new Promise(function (resolve, reject) {
		try{
			promises.forEach(p =>
                p.then(data => {
                	if (!resolved) {
                		resolved = true;
                		resolve (data);
                	}
                })
            )
		} catch (error) {
			reject(error);
		}
	})
}