Questions tagged «javascript»

我对如何使用popup（window.open）在React中实现OAuth感兴趣。 例如，我有： mysite.com -这是我打开弹出窗口的地方。 passport.mysite.com/oauth/authorize - 弹出。 主要问题是如何在window.open（popup）和（popup）之间建立连接（window.opener众所周知，由于跨域安全性，window.opener为null，因此我们不能再使用它了）。 ⇑ window.opener每当您导航到不同的主机（出于安全原因）被删除，有没有办法解决它。如果可能的话，唯一的选择应该是在框架内付款。最上面的文档需要保留在同一主机上。 方案： 可能的解决方案： 使用此处setInterval所述检查打开的窗口。 使用交叉存储（不值得imho）。 那么，2019年推荐的最佳方法是什么？ React包装器-https: //github.com/Ramshackle-Jamathon/react-oauth-popup

12 javascript  reactjs  oauth  popup  authorization 

我正在为多个客户创建一个API。像/users每个客户一样使用核心端点，但是某些端点依赖于单独的自定义。因此，可能是用户A需要一个特殊的终结点，/groups而其他客户将没有该功能。就像附带说明一样，由于这些额外功能，每个客户也将使用自己的数据库架构。 我个人使用NestJs（引擎盖下的Express）。因此，app.module当前注册了我所有的核心模块（带有自己的端点等）。 import { Module } from '@nestjs/common'; import { UsersModule } from './users/users.module'; // core module @Module({ imports: [UsersModule] }) export class AppModule {} 我认为这个问题与NestJs无关，因此您在理论上将如何处理？ 我基本上需要一个能够提供基本系统的基础架构。由于每个扩展都是唯一的，/users因此可能不再存在核心端点。开发新功能时，不应触摸核心应用程序。扩展应自行集成或在启动时进行集成。核心系统没有端点，但将从这些外部文件扩展。 我想到了一些主意 第一种方法： 每个扩展都代表一个新的存储库。定义一个包含所有扩展项目的自定义外部文件夹的路径。此自定义目录将包含一个groups带有groups.module import { Module } from '@nestjs/common'; import { GroupsController } from './groups.controller'; @Module({ controllers: [GroupsController], }) export class GroupsModule {} …

12 javascript  rest  api  express  nestjs 

React Hooks给了我们useState选项，我总是看到Hooks与Class-State的比较。但是Hooks和一些常规变量呢？ 例如， function Foo() { let a = 0; a = 1; return <div>{a}</div>; } 我没有使用Hooks，它将为我带来以下结果： function Foo() { const [a, setA] = useState(0); if (a != 1) setA(1); // to avoid infinite-loop return <div>{a}</div>; } 那么区别是什么？在这种情况下，使用Hooks更加复杂...那为什么要开始使用它呢？

12 javascript  node.js  reactjs  react-hooks 

由于我无法发表评论，因此我不得不撰写这篇文章。我得到下面的代码，它延迟/恰好延迟1秒或1000毫秒- let n = 5; for (let i=1; i<n; i++) { setTimeout( function timer() { console.log("hello world"); }, i*1000 ); } 运行代码段隐藏结果展开摘要 但是，我如何将其延迟* 1000秒而不是固定的1000毫秒，所以等待取决于迭代次数？ 例如，如果n = 5，那么我希望在第一次迭代中将循环延迟设为1秒。在第二次迭代中2秒，依此类推...最终延迟将为5秒。

12 javascript  wait 

我发生了以下顺序： 主屏幕 载入画面 结果画面 在主页上，当有人单击按钮时，我将其通过以下方式发送到加载屏幕： this.$router.push({path: "/loading"}); 任务完成后，将通过以下方式将其发送到结果屏幕 this.$router.push({path: "/results/xxxx"}); 问题是，通常他们希望从结果返回主屏幕，但是当他们单击返回时，它们将被发送到再次加载，从而将它们发送回结果，因此它们陷入了无限循环并且无法前进返回主屏幕。 任何想法如何解决这一问题？理想情况下，我希望有一个类似的选择： this.$router.push({path: "/loading", addToHistory: false}); 这会将他们发送到该路线而不将其添加到历史记录中。

12 javascript  vue.js  vue-router 

这是我使用内联箭头功能更改onClickdiv 路线的组件，但我知道这不是性能方面的好方法 1.内联箭头功能 changeRoute (routeName) { console.log(routeName) } render() { return ( <> <div onClick={() => this.changeRoute("page1")}>1</div> <div onClick={() => this.changeRoute("page2")}>2</div> </> ) } 2.如果我使用构造函数绑定，那么如何传递道具？ constructor() { super(props) this.changeRoute = this.changeRoute.bind(this) } changeRoute (routeName) { console.log(routeName) } render() { return ( <> <div onClick={this.changeRoute}>1</div> <div onClick={this.changeRoute}>2</div> </> ) } 3.如果我删除了箭头函数，则该函数将在渲染本身上被调用 …

11 javascript  reactjs 

我已经安装material-ui / lab以便使用警报组件，但是每当我使用以下命令导入它时：import Alert from '@material-ui/lab/Alert';它无法编译并引发此错误： ./node_modules/@material-ui/lab/esm/internal/svg-icons/SuccessOutlined.js Attempted import error: 'createSvgIcon' is not exported from '@material-ui/core/utils'. 因此，我尝试通过Google搜索此问题，发现了另一个有关该material-ui/lab/AutoComplete组件的问题（确切地说是这个问题），并且可接受的答案是将material-ui / core更新为4.9.9版，对于要求该功能的人来说，它似乎很有效，但可惜不是我，我拥有所有已安装material-ui的这个版本： "@material-ui/core": "^4.9.9", "@material-ui/icons": "^4.9.1", "@material-ui/lab": "^4.0.0-alpha.48", 所以现在我问你们是否还有另一种方法可以解决这个问题，谢谢

11 javascript  node.js  reactjs  material-ui 

MDN 说 for await...of有两个用例： 该for await...of语句创建一个循环，循环遍历异步可迭代对象以及同步可迭代对象，... 我以前知道前者：使用异步可迭代Symbol.asyncIterator。但是我现在对后者感兴趣：同步可迭代。 以下代码在一个同步可迭代对象（一个promise数组）上进行迭代。它似乎阻碍了每个诺言的实现。 async function asyncFunction() { try { const happy = new Promise((resolve)=>setTimeout(()=>resolve('happy'), 1000)) const sad = new Promise((_,reject)=>setTimeout(()=>reject('sad'))) const promises = [happy, sad] for await(const item of promises) { console.log(item) } } catch (err) { console.log(`an error occurred:`, err) } } asyncFunction() // …

11 javascript  async-await 

这是一个奇怪的问题。我们有一个Laravel网站，在所说的网站上，每个用户都有一个计时器，在启动之前，他们会在15分钟内处于非活动状态。 我们通过一个React组件中位于页面上的计时器来执行此操作，它可以按期望的方式工作，但是现在我们遇到了一个新问题：如果用户登录并关闭笔记本电脑的盖子，则网站应该启动它们。银行这样做，学校和大学这样做，政府场所也这样做。因此有可能，只是不确定如何。 我们使用laravel-websockets库和Echo 来使用Web套接字。我希望看到的是： 关闭笔记本电脑启动后，您将进入登录屏幕。因此，下次打开笔记本电脑并登录时，会在登录屏幕上看到浏览器。它并不需要很快发生，但是我们需要一种方法来将一些内容发送到前端，基本上告诉他们刷新页面，一旦会话被终止，我们将会话生存时间设置为15分钟。 有人在其他类似问题中提出了建议： 创建一个自定义的网络套接字处理程序 将会话cookie（在浏览器中）与后端的用户cookie进行比较。 要在前端运行计时器（我们这样做，当您合上笔记本电脑盖时它会停止） 最受欢迎的一种似乎是使用网络套接字，侦听用户断开连接然后再启动它们，这很好，而且一切正常，但是如何将请求发送到已暂停然后再启动的浏览器？ 我发现了requestIdleCallback（）但是，如果我已经在该站点上安装了心跳计时器，那么我不希望这就是我想要的。它也不适用于所有浏览器。 我对如何完成此操作非常迷失，我可以举的例子是： 登录到您的银行，使计算机进入睡眠状态，等待15-20分钟，唤醒计算机，然后登录，然后在登录屏幕上看到您的银行已将您带入。那就是我想要的。但是我不知道该怎么做到。 您不能从后端将事件发送到“正在休眠”的浏览器，虽然是的，这必须是后端解决方案，但是如何更新前端，以便重新唤醒笔记本电脑时它们出现在注销屏幕上还是电脑？

11 javascript  php  laravel  authentication 

我<If />使用React 创建了一个简单的功能组件： import React, { ReactElement } from "react"; interface Props { condition: boolean; comment?: any; } export function If(props: React.PropsWithChildren<Props>): ReactElement | null { if (props.condition) { return <>{props.children}</>; } return null; } 它使我可以编写更简洁的代码，例如： render() { ... <If condition={truthy}> presnet if truthy </If> ... 在大多数情况下，它工作良好，但是当我想检查例如是否未定义给定变量然后将其作为属性传递时，这便成为问题。我举一个例子： 假设我有一个名为的组件<Animal />，它具有以下属性： interface …

11 javascript  reactjs  typescript 

已关闭。这个问题是基于观点的。它当前不接受答案。 想改善这个问题吗？更新问题，以便通过编辑此帖子以事实和引用的形式回答。 2个月前关闭。 我从API获得响应作为json响应。我在用python编写后端代码。 前端团队需要原始JSON响应中的信息来填充UI，因此我们必须订购json，并使他们更容易获取信息。 现在，我可以以特定格式订购json并推送给前端团队，也可以将原始的json响应*传递给前端团队，让他们处理订购json并进一步用于其UI。 记住我的json文件大小为15MB。 哪个更快，更好的设计原理？ 在后端处理，然后推送到前端还是在前端处理？

11 javascript  python-3.x  data-structures 

请尝试运行以下代码段，然后单击相应的框。 const box = document.querySelector('.box') box.addEventListener('click', e => { if (!box.style.transform) { box.style.transform = 'translateX(100px)' new Promise(resolve => { setTimeout(() => { box.style.transition = 'none' box.style.transform = '' resolve('Transition complete') }, 2000) }).then(() => { box.style.transition = '' }) } }) .box { width: 100px; height: 100px; border-radius: 5px; background-color: …

11 javascript  css  promise  settimeout 

我有两个功能，scheduleScan()和scan()。 scan()scheduleScan() 在除了安排新扫描之外无其他操作时调用，因此scheduleScan()可以安排scan()。但是有一个问题，有些作业要运行两次。 我想确保在任何给定时间仅处理一项作业。我该如何实现？我相信与done()（，它已经在scan（）中，现在已删除）有关，但我无法提出解决方案。 公牛版：3.12.1 重要的后期编辑： scan()调用另一个函数，它们可能会调用也可能不会调用其他函数，但是它们都是同步函数，因此它们仅在完成自己的作业时才调用一个函数，只有一种前进的方式。我在“树”的末尾调用它，最后一个函数调用scheduleScan（），但是不能同时运行两个作业。scan()顺便说一句，每个工作都始于，然后以scheduleScan(stock, period, milliseconds, 'called by file.js') export function update(job) { // does some calculations, then it may call scheduleScan() or // it may call another function, and that could be the one calling // scheduleScan() function. // For instance, a function like finalize() } …

11 javascript  node.js  bull.js 

最好编写不依赖于立即回调的时间（例如微任务与宏任务）的代码，但是暂时不考虑它。 setTimeout将宏任务排队，该宏任务至少等待开始，直到所有微任务（以及它们产生的微任务）完成。这是一个例子： console.log('Macrotask queued'); setTimeout(function() { console.log('Macrotask running'); }); Promise.resolve() .then(function() { console.log('Microtask running'); }); console.log('Microtask queued'); console.log('Last line of script'); 运行代码段隐藏结果展开摘要 的行为.then上解决承诺是立即的行为根本不同的setTimeout回调-无极.then将首先运行，即使setTimeout是第一次排队。但是，只有现代的浏览器才支持Promises。如果不存在，如何正确填充微任务的特殊功能Promise？ 如果您尝试使用来模仿.then的微setTimeout任务，则会排队执行宏任务，而不是微任务，因此，.then如果已将宏任务排入队列，则填充不良的代码将无法在正确的时间运行。 有一个使用的解决方案MutationObserver，但它看起来很丑陋，不是什么MutationObserver用。另外，MutationObserverIE10及更早版本不支持。如果要在本机不支持Promises的环境中排队微任务，还有其他更好的选择吗？ （我实际上并不是在尝试支持IE10-这只是关于如何在没有Promises的情况下将微任务排队的理论练习）

11 javascript  promise  event-loop 

我正在尝试从Node.js中的Promise中找到未处理的拒绝的来源 我尝试使用--async-stack-traces选项升级到节点版本12，并使用以下命令监听它们： process.on("unhandledRejection",( reason, promise ) => { console.log(reason); console.log(promise); }); 但是我仍然看不到任何有用的堆栈跟踪信息来帮助我找到罪魁祸首！ UnhandledPromiseRejectionWarning: TypeError: Chaining cycle detected for promise #<Promise> at process._tickCallback (internal/process/next_tick.js:68:7) (node:89675) UnhandledPromiseRejectionWarning: Unhandled promise rejection. This error originated either by throwing inside of an async function without a catch block, or by rejecting a promise which was …

11 javascript  node.js  promise  v8