Promise.race 在高并发场景下的应用技巧
在前端应用程序中，经常会遇到需要处理多个异步请求的情况。一般的解决方案是使用 Promise.all 方法。但有时候，在高并发情况下，所有请求的响应时间大致相同，而 Promise.all 方法本身要等待所有请求响应完成后再返回结果，因此可能会造成长时间的等待，影响整体性能。这时，我们可以使用 Promise.race 这个方法，它可以有效地提高程序执行效率。
Promise.race 方法会返回一组 Promise 中最先执行完成的 Promise 对象的结果。同时，我们可以通过使用 Promise.race 方法，进行请求的超时控制，当请求执行时间过长时，通过 race 方法中 reject 掉对应的 Promise 对象。
在本文中，我们将探讨 Promise.race、它的应用技巧，并且使用一个实际的场景来说明。同时，本文也将提供详细的代码示例，以便读者更好地理解。
Promise.race 基础语法
Promise.race 方法的用法和 Promise.all 方法类似。Promise.race 方法接收一个包含多个 Promise 的数组，并返回第一个执行完成（或第一个执行失败）的 Promise 对象的结果。
Promise.race(promiseArr) .then(res => { console.log(res); }) .catch(err => { console.log(err); })
在上面的方法调用中，当 promiseArr 中的某一个 Promise 对象执行成功或执行失败时，race 方法就会将其结果返回给 then 或 catch 回调函数。
Promise.race 的应用技巧
Promise.race 方法最大的优点是可以有效地优化程序的性能。具体表现在几个方面：
- 超时控制
经常会遇到这样的场景：我们需要调用一个第三方接口获得数据，但是如果接口在 5 秒内没有给出响应，就不再等待该结果，而是转而调用其他接口。
我们可以使用 Promise.race 方法来实现这样的功能。
const timeout = function(delay) {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject(请求超时，等待时间：${delay}ms);
}, delay);
});
}
Promise.race([fetch('http://example.com/data1'), timeout(5000)]) .then(res => { console.log(res); }) .catch(err => { console.log(err); })
上面的代码中，当 fetch 请求执行完成，就可以获得数据，如果超过 5 秒没有收到数据，timeout Promise 对象就会被 reject，不再执行后续的 then 函数。
- 高并发优化
Promise.all 方法总是等待所有 Promise 执行完毕才返回结果。在高并发场景下，可以使用 Promise.race 方法，通过执行最快返回的 Promise 对象，来有效地提高程序响应速度。
例如，我们需要从三个接口中获取数据，这样我们就可以使用 Promise.race方法：
Promise.race([ fetch('http://example.com/data1'), fetch('http://example.com/data2'), fetch('http://example.com/data3'), ]) .then(res => { console.log(res); })
在上面的代码中，race 方法将返回其中最快返回的 Promise 数据。
实战：Promise.race 在图片加载中的应用
要深入了解 Promise.race 的应用，可以通过一个实际的应用场景来加深理解。
假设我们的 web 页面需要加载多张图片，但是如果有一些图片加载失败，我们需要尽快处理，以免影响整个页面的加载进程。这个时候，我们可以使用 Promise.all 方法来加载所有图片，同时添加一个超时 Promise 来处理慢加载的图像。如果有加载失败的图片，我们就可以立即使用 Promise.race 来返回第一个完成的 Promise。
以下是一个基于 Promise.all 和 Promise.race 的实际应用示例代码：
const container = document.getElementById('container'); const imageUrlArr = ['/images/1.jpg', '/images/2.jpg', '/images/3.jpg', '/images/4.jpg'];
// timeout Promise
const timeout = function(delay) {
return new Promise((resolve, reject) => {
setTimeout(() => {
reject(请求超时，等待时间：${delay}ms);
}, delay);
});
}
// Promise.all Promise.all( imageUrlArr.map(imgUrl => { return new Promise((resolve, reject) => { const img = new Image(); img.onload = () => { resolve(imgUrl + ' 加载成功'); } img.onerror = () => { reject(imgUrl + ' 加载失败'); } img.src = imgUrl; }); }).concat([timeout(2000)]) ).then(res => { console.log(res); const imgArr = res.filter(r => r.indexOf('成功') > -1); renderImg(imgArr); }).catch(err => { console.log(err); const imgArr = err.filter(r => r.indexOf('成功') > -1); renderImg(imgArr); alert('图片资源加载失败'); })
// Promise.race function renderImg(imgUrlArr) { imageUrlArr.forEach(imgUrl => { const img = new Image(); const promise = new Promise((resolve, reject) => { img.onload = () => { resolve(); } img.onerror = () => { reject(); } }); img.src = imgUrl; Promise.race([promise, timeout(1000)]) .then(() => { container.appendChild(img); }) .catch(() => { console.log(imgUrl + ' 加载失败！'); }) }); }
在上述代码中，我们使用了 Promise.all 方法来加载所有的图片，并加入了一个超时 Promise，以便处理慢加载的图片。同时，获得了所有加载结果，如果有加载失败的图片，就会弹出警告框提示用户。
接着我们使用 Promise.race 方法来依次渲染已经加载成功的图片。通过使用 Promise.race，我们可以在图片加载完成之前最快的向用户进行反馈。这样，即使有些图片加载失败了，但用户仍然可以看到一些加载成功的图片。
结论
Promise.race 方法是在高并发场景下，对付异步请求的利器。它可以通过对请求的超时控制以及对请求响应速度的优化，来提高Web应用程序的性能和用户的体验。我们可以根据具体应用场景，结合 Promise.all 方法或其他相关技术，来充分地利用 Promise.race 方法带来的优点。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f3fed2f40ec5a964e68c5d