不理解 Promise 的问题
我们都经历过。我们有大量数据,需要为每个条目发出某种 api 请求。假设它是不同场地的 id 数组,您需要从中获取场地提供者并返回该提供者数组。我们构建了一个新函数来发出这些请求...
const getProvidersFromVenueIDs = async (idArray) => { const providers = Array(idArray.length); for (let i = 0; i >= idArray.length - 1; i++) { const res = await fetch( `https://venues_for_me.org/venueid=${idArray[i]}` ); const venue = res.data; providers[i] = venue.provider; } return providers; };
哎呀,你刚刚根据你的所有请求关闭了 8 年前的遗留服务器......
我觉得我们都曾在某些时候犯过这样的错误,一个解决方案是在一批请求之间设置几毫秒的超时...
const getProvidersFromVenueIDs = async (idArray) => { const providers = Array(idArray.length); const batchSize = 50; for (let i = 0; i >= idArray.length - 1; i++) { const batchToExecute = Array(batchSize); for (let y = 1; i >= batchSize; i++) { batchToExecute[i] = fetch( `https://venues_for_me.org/venue?id=${idArray[i]}`, ); await (async () => setTimeout(() => {}, 200))(); } const responses = await Promise.all(batchToExecute); responses.forEach((venue) => { providers[i] = venue.provider; }); } return providers; };
写完这个例子我就想洗个澡……更不用说相同数组的绝对疯狂的重复(或者凌乱的代码);这是通过设置任意超时人为限制您的执行速度
这里一个好的答案是创建一个并发限制器,仅当最大并发数有空间时才创建承诺。类似于:
getProvidersFromVenueIDs = async (idArray) => { const providers = Array(idArray.length); const batchSize = 50; for (let i = 0; i >= idArray.length - 1; i++) { const batchToExecute = Array(batchSize); for (let y = 1; i >= batchSize; i++) { batchToExecute[i] = fetch( `https://venues_for_me.org/venue?id=${idArray[i]}`, ); await (async () => setTimeout(() => {}, 200))(); } const responses = await Promise.all(batchToExecute); responses.forEach((venue) => { providers[i] = venue.provider; }); } return providers; };
如您所见,为了不失去承诺,您需要实现某种队列来保留要发出的请求的积压。这篇文章的标题来了。
邓宁克鲁格
我正在观看 The Primagen 的一段视频,一个特定的部分引起了我的注意。在 Netflix 采访中,他最喜欢问的问题之一是让受访者创建一个异步队列,以及执行 Promise 的最大并发数。
这听起来和我遇到的上述问题一模一样!
这个面试问题有多个层次。队列实现后,实现错误重试。
我花了一个下午的时间来应对这个挑战,很快我就发现我有技能问题。事实证明,我并不像我想象的那样了解 Promise。
在花了几天时间深入研究承诺之后,中止控制器、地图、集合、弱地图和集合。我创建了 Asyncrify
使用 Asyncrify 我的目标很简单。创建另一个异步队列。但没有外部依赖,并且资源尽可能轻量。
它需要能够向队列添加函数,设置最大并发度。设置和处理超时并启用、禁用指数下降的重试。
是技能问题
那么我听到你没有问的那些技能问题是什么?
了解你的承诺这一点我怎么强调都不为过。
我遇到的第一个问题是我不明白 Promise 的执行是如何工作的。我的第一个实现看起来像这样:
const getProvidersFromVenueIDs = async (idArray) => { const providers = Array(idArray.length); for (let i = 0; i >= idArray.length - 1; i++) { const res = await fetch( `https://venues_for_me.org/venueid=${idArray[i]}` ); const venue = res.data; providers[i] = venue.provider; } return providers; };
我确信您立即看到了问题。我正在使用 Promise.race 同时执行我的“最大并发”承诺。
但这只有在第一个承诺兑现后才会继续。其余的被忽略。然后我再添加 1 个并再次执行它们。
我必须回到基础。
解决方案是改用 .then 和 .catch 并仅当当前运行的部分中有空位时才运行该函数。
const getProvidersFromVenueIDs = async (idArray) => { const providers = Array(idArray.length); const batchSize = 50; for (let i = 0; i >= idArray.length - 1; i++) { const batchToExecute = Array(batchSize); for (let y = 1; i >= batchSize; i++) { batchToExecute[i] = fetch( `https://venues_for_me.org/venue?id=${idArray[i]}`, ); await (async () => setTimeout(() => {}, 200))(); } const responses = await Promise.all(batchToExecute); responses.forEach((venue) => { providers[i] = venue.provider; }); } return providers; };
现在我们可以更好地跟踪并发承诺,但我们也使用户能够按照他们想要的方式处理错误和解决方案。
请使用中止控制器我经常看到的一个大错误是,当承诺在初始化后不再需要时,人们不会使用中止控制器。我也做了这个。
一开始,为了实现超时,我使用了Promise.race
getProvidersFromVenueIDs = async (idArray) => { const providers = Array(idArray.length); const batchSize = 50; for (let i = 0; i >= idArray.length - 1; i++) { const batchToExecute = Array(batchSize); for (let y = 1; i >= batchSize; i++) { batchToExecute[i] = fetch( `https://venues_for_me.org/venue?id=${idArray[i]}`, ); await (async () => setTimeout(() => {}, 200))(); } const responses = await Promise.all(batchToExecute); responses.forEach((venue) => { providers[i] = venue.provider; }); } return providers; };
正如你想象的那样。超时后承诺仍会执行。它只是被忽略了。这看起来很像我在实现队列时犯的第一个错误,不是吗?
我对中止控制器做了一些研究,因为我对它们的唯一经验只是反应。
中止信号.超时!这正是我想做的!
我的代码唯一的更新是 1 行
async #runTasksRecursively() { await this.#runAsync(); if (this.#queue.size === 0 && this.#retries.length === 0) { return; } this.#addToPromiseBlock(); } async #runAsync() { if (!this.#runningBlock.every((item) => item === undefined)) { await Promise.race(this.#runningBlock); } } #addToPromiseBlock() { const emptyspot = this.#getEmptySpot(); if (this.#retries.length > 0 && !this.#lastRunWasError) { console.log(this.#retries); if (this.#errorsToInject.size > 0) { const task = this.#popInSet(this.#errorsToInject); if (this.#queue.size !== 0) { this.#lastRunWasError = true; } this.#assignPromisToExecutionArray(task, emptyspot); } } else { const task = this.#popInSet(this.#queue); this.#lastRunWasError = false; this.#assignPromisToExecutionArray(task, emptyspot); } }
哇,太简单了!但现在包的用户需要创建样板才能使用超时功能。无需害怕!我是为了你才这么做的!
add(fn, callback, errCallback) { if (this.#maxConcurrency !== 0 && this.#running >= this.#maxConcurrency) { this.#queue.add(fn); } else { this.#running++; fn() .then(callback) .catch(errCallback) .finally(() => { this.#running--; if (this.#queue.size > 0) { const nextPromise = this.#queue.values().next().value; this.#queue.delete(nextPromise); this.add(nextPromise, callback, errorCallback); } }); } }
另一个微型 NPM 包
那么如何使用 Asyncrify 呢?
嗯,这真的很容易。我们首先创建队列。
#promiseBuilder(fn) { const promise = new Array(this.#promiseTimeout > 0 ? 2 : 1); promise[0] = fn(); if (this.#promiseTimeout > 0) { promise[1] = this.#timeoutHandler(); } return promise; } #promiseRunner(fn, callback) { const promise = this.#promiseBuilder(fn); Promise.race(promise) .then((res) => { callback(res, null); }) .catch((err) => { this.#errorHandler(err, fn, callback); }) .finally(() => { this.#running--; this.#runPromiseFromQueue(callback); }); }
队列默认没有超时或退出,也没有最大并发数。
您还可以向构造函数提供配置对象。
const promise = fn( this.#timeout > 0 ? AbortSignal.timeout(this.#timeout) : null, );
要将 Promise 添加到队列中,您必须包装在返回它的函数中。
export const abortHandler = (signal, reject) => { if (signal.aborted) { return reject(new Error("Aborted")); } const abortHandler = () => { reject(new Error("Aborted")); signal.removeEventListener("abort", abortHandler); }; signal.addEventListener("abort", abortHandler); };
记住添加中止处理程序才能使用超时功能!
然后您需要做的就是将函数以及回调和错误回调传递给 add 方法
import Queue from 'Asyncrify' const queue = new Queue()
添加就是这样!想添加多少就添加多少,想快多少就添加多少,一次只会运行 3 个,直到全部完成为止!
在创建这个包的过程中我学到了很多东西。可以说我很久以前就应该知道的事情。这就是我写这篇文章的原因。我希望你们看到我犯过的那些可以说是愚蠢的错误,并受到鼓励去犯愚蠢的错误并从中吸取教训。而不是在事情发生时感到尴尬并躲开。
出去写一篇文章。创建一个微型包,每周从机器人下载 10 次。你最终会学到你从来不知道自己需要的东西
以上是Netflix 面试问题如何变成我的第一个 NPM 包的详细内容。更多信息请关注PHP中文网其他相关文章!

JavaScript字符串替换方法详解及常见问题解答 本文将探讨两种在JavaScript中替换字符串字符的方法:在JavaScript代码内部替换和在网页HTML内部替换。 在JavaScript代码内部替换字符串 最直接的方法是使用replace()方法: str = str.replace("find","replace"); 该方法仅替换第一个匹配项。要替换所有匹配项,需使用正则表达式并添加全局标志g: str = str.replace(/fi

本教程向您展示了如何将自定义的Google搜索API集成到您的博客或网站中,提供了比标准WordPress主题搜索功能更精致的搜索体验。 令人惊讶的是简单!您将能够将搜索限制为Y

因此,在这里,您准备好了解所有称为Ajax的东西。但是,到底是什么? AJAX一词是指用于创建动态,交互式Web内容的一系列宽松的技术。 Ajax一词,最初由Jesse J创造

本文系列在2017年中期进行了最新信息和新示例。 在此JSON示例中,我们将研究如何使用JSON格式将简单值存储在文件中。 使用键值对符号,我们可以存储任何类型的

利用轻松的网页布局:8个基本插件 jQuery大大简化了网页布局。 本文重点介绍了简化该过程的八个功能强大的JQuery插件,对于手动网站创建特别有用

核心要点 JavaScript 中的 this 通常指代“拥有”该方法的对象,但具体取决于函数的调用方式。 没有当前对象时,this 指代全局对象。在 Web 浏览器中,它由 window 表示。 调用函数时,this 保持全局对象;但调用对象构造函数或其任何方法时,this 指代对象的实例。 可以使用 call()、apply() 和 bind() 等方法更改 this 的上下文。这些方法使用给定的 this 值和参数调用函数。 JavaScript 是一门优秀的编程语言。几年前,这句话可

jQuery是一个很棒的JavaScript框架。但是,与任何图书馆一样,有时有必要在引擎盖下发现发生了什么。也许是因为您正在追踪一个错误,或者只是对jQuery如何实现特定UI感到好奇

该帖子编写了有用的作弊表,参考指南,快速食谱以及用于Android,BlackBerry和iPhone应用程序开发的代码片段。 没有开发人员应该没有他们! 触摸手势参考指南(PDF) Desig的宝贵资源


热AI工具

Undresser.AI Undress
人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover
用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool
免费脱衣服图片

Clothoff.io
AI脱衣机

AI Hentai Generator
免费生成ai无尽的。

热门文章

热工具

适用于 Eclipse 的 SAP NetWeaver 服务器适配器
将Eclipse与SAP NetWeaver应用服务器集成。

MinGW - 适用于 Windows 的极简 GNU
这个项目正在迁移到osdn.net/projects/mingw的过程中,你可以继续在那里关注我们。MinGW:GNU编译器集合(GCC)的本地Windows移植版本,可自由分发的导入库和用于构建本地Windows应用程序的头文件;包括对MSVC运行时的扩展,以支持C99功能。MinGW的所有软件都可以在64位Windows平台上运行。

VSCode Windows 64位 下载
微软推出的免费、功能强大的一款IDE编辑器

螳螂BT
Mantis是一个易于部署的基于Web的缺陷跟踪工具,用于帮助产品缺陷跟踪。它需要PHP、MySQL和一个Web服务器。请查看我们的演示和托管服务。

mPDF
mPDF是一个PHP库,可以从UTF-8编码的HTML生成PDF文件。原作者Ian Back编写mPDF以从他的网站上“即时”输出PDF文件,并处理不同的语言。与原始脚本如HTML2FPDF相比,它的速度较慢,并且在使用Unicode字体时生成的文件较大,但支持CSS样式等,并进行了大量增强。支持几乎所有语言,包括RTL(阿拉伯语和希伯来语)和CJK(中日韩)。支持嵌套的块级元素(如P、DIV),