首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往
  • 您找到你想要的搜索结果了吗?
    是的
    没有找到

    分享 10 个前端开发者需要知道的 JS 技巧

    我们应该给出一个用户友好的提示,而不是什么都不做。...那太糟了,如果你的同事这样写代码,你会揍他吗? 事实上,当函数参数过多时,应该使用对象来传递需要的信息,这样它的可读性和可扩展性都会得到提高。....length判断字符串的长度 大多数情况下,我们使用 .length 来判断字符串的长度是安全的,但在表单输入的情况下要小心。...其实,这种担心是完全没有必要的,因为以后用的可能性很小。就算以后会用到,也可以通过‘git’来追溯。 10. 超过一千行的组件代码 我在一个组件中编写了超过一千行代码。...这太糟糕了,我们应该将组件的功能进一步拆分为更小的组件。

    43740

    【JS】1170- 5 个使用 Promise 时的常见错误

    Promise 提供了一种优雅的方法来处理 js 中的异步操作。这也是避免“回调地狱”的解决方案。然而,并没有多少开发人员了解其中的内容。因此,许多人在实践中往往会犯错误。...为了避免这种情况,我们需要解除代码的嵌套,从第一个 then 中返回 getArticle,然后在第二个 then 中处理它。...然而,在某些情况下,可能需要一个 async 函数。在这种情况下,也别无选择,只能用try/catch 块来手动管理。...但是,如果希望以后再执行 Promises,应该怎么做?如果现在不想发出HTTP请求怎么办?是否有什么神奇的机制内置于 Promises 中,使我们能够做到这一点? 答案就是使用函数。...所以现在我们有一个懒惰的Promise,只有在我们需要的时候才会执行。 5、不一定使用 Promise.all() 方法 如果你已经工作多年,应该已经知道我在说什么了。

    99620

    记一个异步循环遍历的问题

    以下所有操作都是使用的 mongoose ,另外 schema 和 model 定义这些无关紧要的部分统统省略了,无需深究代码的细节处。...从 doc 数组中遍历每一个元素的 phone 属性,去另外一张表中查询 phone 匹配的数据,合并对象,然后返回结果。...我们都知道 node 是基于异步的事件循环机制,但是当我们这里使用 while 循环判断时,这个 while 本质上是一个同步的代码,其是无法与事件循环机制的钩子对接,所以无法跳出这个同步的 while...你肯定想问,上面两个阶段我为什么还在用回掉函数这么老掉渣的写法而不是 promise 呢,因为在 promise 里是不会有类似于 for 、map 这种循环遍历的,涉及到这种操作,应该用 promise.all...结语 ---- 第二阶段的同步阻塞是很容易忽略和想当然的地方,第三阶段当我们要在 promise 中使用类似于 for 、map 这种循环时,其实应用使用的是 promise.all,另外如果你写出了

    1.1K20

    使用 Promise 时的5个常见错误,你占了几个!

    为了避免这种情况,我们需要解除代码的嵌套,从第一个 then 中返回 getArticle,然后在第二个 then 中处理它。...在 Promise 中使用 try/catch 块 通常情况下,我们使用 try/catch 块来处理错误。然而,不建议在 Promise 对象中使用try/catch 。...然而,在某些情况下,可能需要一个 async 函数。在这种情况下,也别无选择,只能用try/catch 块来手动管理。...但是,如果希望以后再执行 Promises,应该怎么做?如果现在不想发出HTTP请求怎么办?是否有什么神奇的机制内置于 Promises 中,使我们能够做到这一点? 答案就是使用函数。...所以现在我们有一个懒惰的Promise,只有在我们需要的时候才会执行。 5. 不一定使用 Promise.all() 方法 如果你已经工作多年,应该已经知道我在说什么了。

    63600

    使用 Promise 时的5个常见错误,你占了几个!

    为了避免这种情况,我们需要解除代码的嵌套,从第一个 then 中返回 getArticle,然后在第二个 then 中处理它。...在 Promise 中使用 try/catch 块 通常情况下,我们使用 try/catch 块来处理错误。然而,不建议在 Promise 对象中使用try/catch 。...然而,在某些情况下,可能需要一个 async 函数。在这种情况下,也别无选择,只能用try/catch 块来手动管理。...但是,如果希望以后再执行 Promises,应该怎么做?如果现在不想发出HTTP请求怎么办?是否有什么神奇的机制内置于 Promises 中,使我们能够做到这一点? 答案就是使用函数。...所以现在我们有一个懒惰的Promise,只有在我们需要的时候才会执行。 5. 不一定使用 Promise.all() 方法 如果你已经工作多年,应该已经知道我在说什么了。

    70010

    手写源码系列(二)——Promise相关方法

    本文首发于知乎专栏——前端面试题汇总,大家可以通过文章底部的阅读原来来访问原文地址 手写Promise相关方法 Promise是面试中经常遇到的,如果面试中面试官问你Promise.all()怎么用,...那你面试的岗位可能是差不多高级前端开发的岗位,但如果让你手写一个Promise.all()那你面试的岗位应该就是资深/专家前端开发的岗位了 上期回顾 上期我们实现了函数的call()、bind()、apply...Promise.all() 先回顾一下Promise.all()的用法 Promise.all(iterable) 方法返回一个 Promise 实例,此实例在 iterable 参数内所有的 promise...一些细节: 官方规定Promise.all()接受的参数是一个可遍历的参数,所以未必一定是一个数组,所以用Array.from()转化一下 使用for…of进行遍历,因为凡是可遍历的变量应该都是部署了iterator...在promise结束时,无论结果是fulfilled或者是rejected,都会执行指定的回调函数。这为在Promise是否成功完成后都需要执行的代码提供了一种方式。

    96430

    一个小白的角度看JavaScript Promise 完整指南

    在这种情况下,可以看到a,b和c上的错误消息。 我们可以使用then函数的第二个参数来处理错误。但是,请注意,catch将不再执行。...当然,这种过早的捕获错误是不太好的,因为容易在调试过程中忽略一些潜在的问题。 Promise finally finally方法只在 Promise 状态是 settled 时才会调用。...假设是从两个不同的api中轮询数据。如果它们不相关,我们可以使用Promise.all()同时触发这两个请求。 在此示例中,主要功能是将美元转换为欧元,我们有两个独立的 API 调用。...但是,在某些情况下,它可以派上用场,比如计时请求或批量处理请求数组。...要做到这一点,我们需要以某种方式限制Promise.all。 假设你有许多并发请求要执行。如果使用 Promise.all 是不好的(特别是在API受到速率限制时)。

    3.6K31

    Salesforce Javascript(一) Promise 浅谈

    上图我们可以经常用到,lwc的wire adapter提供的创建记录的方法,我们可以看到return的内容是一个Promise对象,而且文档中涉及到异步创建或者加载文档等方法通常说都返回一个Promise...承诺通常都不是当时就一下子做的,通常都应该有一定时间进行异步操作。 所以我们通过中文的了解的现实承诺的场景,去了解一下 js中的Promise的概念。...我们在lwc中通常也会遇见多个调用的方式,比如 通过 getRecord获取 account 以后,理论上返回一个 Promise,我们在 then操作时,可以继续请求后台,去获取 关联的Opportunity...解释的很难以理解,来个例子简单了解一下。方法中我们声明了一个Promise,在函数中,调用了 resolve,为了模拟异步操作,使用定时器模拟一下,然后调用 then函数去打印输出。...Promise在lwc中的使用 前面说过,Promise主要用于异步或者加载资源,因为异步lwc已经封装好了,所以说我们在lwc中使用 Promise大部分是加载资源用。

    74920

    【JS】255- 如何在 JS 循环中正确使用 async 与 await

    目前,async / await这个特性已经是stage 3的建议 然而,由于部分开发人员对该语法糖原理的认识不够清晰,泛滥而不加考虑地随意使用async/await ,可能会我们陷入了新的麻烦之中。...应该并行执行。...功能完整度与使用便利度一直是相互博弈的,很多框架思想的不同开源版本,几乎都是把功能完整度与便利度按照不同比例混合的结果。...,原始代码中,函数 c 可以与 a同时执行,但 async/await 语法会让我们倾向于在 b 执行完后,再执行 c。...原文作者给出了 Promise.all 的方式简化逻辑,但笔者认为,不要一昧追求 async/await 语法,在必要情况下适当使用回调,是可以增加代码可读性的。

    2.4K40

    react技术问题十问十答

    )和卸载(Unmounting) React为每个过程提供了一些回调函数,称作钩子函数,让我们可以自定义一些事情,如果想了解更多的内容,可以关注下我的新书《React状态管理与同构实战》 问:React...答: 可以写一个babel插件,给react扩展v-model的功能哈 表单校验,也可以封装一些高阶函数吧 在原生标签的函数中,使用bind或者剪头函数没什么问题哈,或者可以把值放到dom属性中,这样的性能还不如多一个函数快...var worker = new Worker(js file path); 答:js中是没有多线程的,但是却可以做到请求并发,如果想要多个请求都返回时才处理,可以使用Promise.all 在有密集计算...,又不希望卡顿主线程的情况下,原来只能用setTimeout分片,现在可以用worker了,这种方式非常棒,有实际的使用场景 问:做技术选型如何考量react在开发应用的优略?...答:这其实就是技术选型的问题,我将回答react到底适合什么场景,技术栈是否应该统一 如果你的页面交互比较简单,其实使用react,并不能比使用jq提升多少效率,对于这种业务,用不用react是无所谓的

    1.3K20

    初学者应该看的JavaScript Promise 完整指南

    在这种情况下,可以看到a,b和c上的错误消息。 我们可以使用then函数的第二个参数来处理错误。 但是,请注意,catch将不再执行。...当然,这种过早的捕获错误是不太好的,因为容易在调试过程中忽略一些潜在的问题。 Promise finally finally方法只在 Promise 状态是 settled 时才会调用。...假设是从两个不同的api中轮询数据。如果它们不相关,我们可以使用Promise.all()同时触发这两个请求。 在此示例中,主要功能是将美元转换为欧元,我们有两个独立的 API 调用。...稍后,我们读取文件2并将其再次附加到output文件。 如你所见,writeFile promise返回文件的内容,你可以在下一个then子句中使用它。 如何链接多个条件承诺?...要做到这一点,我们需要以某种方式限制Promise.all。 假设你有许多并发请求要执行。 如果使用 Promise.all 是不好的(特别是在API受到速率限制时)。

    3.3K30

    记得有一次面试被虐的题,Promise 完整指南

    在这种情况下,可以看到a,b和c上的错误消息。 我们可以使用then函数的第二个参数来处理错误。 但是,请注意,catch将不再执行。...当然,这种过早的捕获错误是不太好的,因为容易在调试过程中忽略一些潜在的问题。 Promise finally finally方法只在 Promise 状态是 settled 时才会调用。...假设是从两个不同的api中轮询数据。如果它们不相关,我们可以使用Promise.all()同时触发这两个请求。 在此示例中,主要功能是将美元转换为欧元,我们有两个独立的 API 调用。...但是,在某些情况下,它可以派上用场,比如计时请求或批量处理请求数组。...要做到这一点,我们需要以某种方式限制Promise.all。 假设你有许多并发请求要执行。 如果使用 Promise.all 是不好的(特别是在API受到速率限制时)。

    2.3K20

    React 应用架构实战 0x3:构建和配置页面

    这一节,将学习 Next.js 中的路由工作原理以及可以使用的渲染方法,以充分利用 Next.js 的特性。然后,我们将学习如何配置每个页面的布局,使应用程序看起来和感觉像一个单页应用程序。...如,指向根路由的页面应该在 src/pages/index.tsx 文件中定义。如果我们想要 About 页面,我们可以在 src/pages/about.tsx 中定义它。...在这里,我们必须等待初始页面加载完成,然后再获取用户数据。对于不应该公开的数据(例如管理员看板),这种方法完全有效。...使用 Next.js 的好处在于它允许我们在每个页面上使用不同的渲染策略,因此我们可以组合它们以最佳方式适应应用程序的需求。...一些 SSR 的缺点,主要包括: 需要更多的计算资源,这可能会影响服务器成本 较长的 getServerSideProps 执行时间可能会阻塞整个应用程序 因此,我们只希望在合适的情况下使用 SSR,比如需要对

    82820

    【ES】ES2021 我学不动了,这次只学 3 个。

    目前已经确定的有 5 个新特性,为了能让你更好地记住,我特定挑了 3 个我觉得比较有意思的和你讲讲吧。 好好好,最喜欢用最少的时间学最有用的东西了! 1.逻辑操作符 你有遇到过这样的情况吗?...从字面意思来看,相信聪明的你应该能大致猜出这个 API 的作用。Promise.any 接受一个 Promise 的数组。...好东西,有一个问题,这个和Promise.all 好像呀 没错,我们可以把这两个一起记忆, 我们可以把 Promise.any 理解成 Promise.all 的相反操作。...下面我通过 Promise.all 来降级模拟promise.any 来加深记忆。 你别这种眼神看着我,我又不是不讲。...如果想要在实际项目中使用,请使用以下两个插件。

    20410

    ES2021 我学不动了,这次只学 3 个。

    目前已经确定的有 5 个新特性,为了能让你更好地记住,我特定挑了 3 个我觉得比较有意思的和你讲讲吧。 好好好,最喜欢用最少的时间学最有用的东西了! 1.逻辑操作符 你有遇到过这样的情况吗?...从字面意思来看,相信聪明的你应该能大致猜出这个 API 的作用。Promise.any 接受一个 Promise 的数组。...好东西,有一个问题,这个和Promise.all 好像呀 没错,我们可以把这两个一起记忆, 我们可以把 Promise.any 理解成 Promise.all 的相反操作。...下面我通过 Promise.all 来降级模拟promise.any 来加深记忆。 你别这种眼神看着我,我又不是不讲。...如果想要在实际项目中使用,请使用以下两个插件。

    26630

    这些 JavaScript 细节,你知道不?

    本文主要给大家带来一些我读《你不知道的 JavaScript(中卷)》中遇到的一些有意思的内容,可以说是打开新世界的大门的感觉。希望能在工作之余,给大家带来一点乐趣。...在文末小编也给大家准备了一点小福利 JavaScript 是一门优秀的语言。只学其中一部分内容很容易,但是要全面掌握则很难。...由调用代码来决定如何安排这两个 promise,而不是把这种细节放在 foo(..) 内部抽象,这样更整洁也更灵活。这里使用了 Promise.all([ .. ]),当然,这并不是唯一的选择。...我们可以在辅助工具中采用某种函数技巧: function spread(fn) { return Function.apply.bind(fn, null); } Promise.all(...id=" + btnID); }).then(function(text){ console.log(text); }); 复制代码 只有在你的应用只需要响应按钮点击一次的情况下,这种方式才能工作

    45730
    领券