【JavaScript源代码】Promise面试题详解之控制并发.docx

Promise面试题详解之控制并发 　　在写这篇文章的时候我有点犹豫，因为先前写过一篇类似的，一道关于并发控制的面试题，只不过那篇文章只给出了一种解决方案，后来在网上又陆续找到两种解决方案，说来惭愧，研究问题总是浅尝辄止，所以今天便放在一起，借着这道面试题再重新梳理一下。　　有 8 个图片资源的 url，已经存储在数组 urls 中（即urls = [‘http://example.com/1.jpg', …., ‘http://example.com/8.jpg']），而且已经有一个函数 function loadImg，输入一个 url 链接，返回一个 Promise，该 Promise 【JavaScript 源代码】Promise面试题详解之控制并发 在JavaScript中，Promise是处理异步操作的重要工具，尤其在处理并发控制时显得尤为重要。本题的面试题旨在考察开发者对于Promise的理解以及如何通过Promise来控制并发。题目要求在并发下载8个图片资源时，任何时刻同时进行的下载任务不超过3个，以实现高效且有序的图片加载。 我们需要理解题目的核心需求。给定一个包含8个图片URL的数组`urls`，以及一个函数`loadImg`，它接收一个URL并返回一个Promise，当图片加载成功时Promise解析，加载失败则拒绝。我们的目标是在并发限制为3的情况下尽快完成所有图片的下载。 一种常见的解决方法是使用递归和计数器。创建一个全局变量`count`来记录当前正在执行的并发任务数。然后，定义一个函数`bao`，在这个函数内部，我们递增计数器`count`，并检查当前的并发任务数是否未超过限制（即`count <= 3`）以及还有剩余的图片URL需要处理。如果满足条件，我们调用`loadImg`并移除队列头部的一个URL。图片加载完成后，递减计数器，并再次调用`bao`以处理下一个图片。通过一个外部函数`async1`启动前3次调用，以便初始化并发任务。 这种解决方案虽然有效，但可以进一步优化。我们可以将并发控制逻辑和`loadImg`的调用封装在一个单独的异步函数`request`中。每次调用`request`都会增加计数器，执行`loadImg`，并在图片加载完成后减少计数器。这样，我们可以在一个更简洁的结构中管理并发控制，如下所示： ```javascript let count = 0; let urls = [ 'https://www.kkkk1000.com/images/getImgData/getImgDatadata.jpg', // 其他URL... ]; // 封装请求的异步函数,增加计数器功能 function request() { if (urls.length === 0 || count >= 3) return; count++; loadImg(urls.shift()) .then(() => { count--; // 递归调用request，直到完成所有图片或达到并发限制 request(); }) .catch(() => { count--; // 如果出现错误，也继续处理下一个图片 request(); }); } // 启动3个初始请求 for (let i = 0; i < 3; i++) { request(); } ``` 这种方法的优点在于，我们可以通过一个独立的`request`函数来控制并发，使得代码更清晰，易于理解和维护。此外，即使在图片加载过程中发生错误，我们也可以确保继续处理后续的图片，以达到预期的并发限制。 Promise和递归的结合为我们提供了一种优雅的解决方案，能够有效地控制并发，同时保证了所有图片的下载。在实际开发中，这样的控制策略不仅适用于图片加载，还可以应用于其他需要限制并发的任务，如HTTP请求、数据库操作等。