开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

当我需要全局html-minifier时，为什么minify函数返回Promise { <pending> }而不是HTML？

当你需要全局html-minifier时，minify函数返回Promise { <pending> }而不是HTML的原因是因为minify函数是一个异步函数，它返回一个Promise对象。Promise对象代表了一个异步操作的最终完成或失败，并且可以返回一个值或抛出一个异常。

在这种情况下，minify函数返回的Promise对象表示html-minifier正在执行压缩HTML的操作，但是由于这是一个耗时的操作，所以返回的Promise对象处于等待状态（pending），直到压缩完成或出现错误。

通过使用Promise对象，可以更好地处理异步操作，避免阻塞主线程。你可以使用Promise的then方法来处理异步操作的结果，当Promise对象的状态变为已完成（fulfilled）时，then方法会被调用，并且可以获取到压缩后的HTML。

以下是一个示例代码，展示了如何使用minify函数和Promise对象来获取压缩后的HTML：

const minify = require('html-minifier').minify;

// 调用minify函数，返回一个Promise对象
const promise = minify('<html>...</html>', options);

// 使用then方法处理Promise对象的结果
promise.then((compressedHtml) => {
  console.log(compressedHtml); // 输出压缩后的HTML
}).catch((error) => {
  console.error(error); // 输出错误信息
});

在上面的示例中，你需要将<html>...</html>替换为你要压缩的HTML代码，options是一个可选的配置对象，用于指定压缩的选项。你可以根据需要自定义配置对象的属性，例如{ collapseWhitespace: true }表示压缩HTML中的空白字符。

对于腾讯云相关产品，推荐使用腾讯云的云函数（SCF）来运行这段代码。云函数是一种无服务器计算服务，可以让你在云端运行代码，无需关心服务器的配置和管理。你可以使用云函数来执行HTML压缩操作，并将压缩后的HTML存储在腾讯云的对象存储（COS）中。

腾讯云函数（SCF）产品介绍链接地址：https://cloud.tencent.com/product/scf

腾讯云对象存储（COS）产品介绍链接地址：https://cloud.tencent.com/product/cos

页面内容是否对你有帮助？

有帮助

没帮助

相关·内容

字节前端必会面试题

对于已经柯里化后的函数来说，当接收的参数数量与原函数的形参数量相同时，执行原函数；当接收的参数数量小于原函数的形参数量时，返回一个函数用于接收剩余的参数，直至接收的参数数量与形参数量一致，执行原函数。...当我们把一个 DocumentFragment 节点插入文档树时，插入的不是 DocumentFragment 自身，而是它的所有子孙节点。...HTTPS 降低一定用户访问速度（实际上优化好就不是缺点了）。HTTPS 消耗 CPU 资源，需要增加大量机器。...（1）Promise的实例有三个状态:Pending（进行中）Resolved（已完成）Rejected（已拒绝）当把一件事情交给promise时，它的状态就是Pending，任务完成了状态就变成了Resolved...Promise 是一个构造函数，接收一个函数作为参数，返回一个 Promise 实例。

2492 0

惊艳！可视化的 js：动态图演示 Promises & AsyncAwait 的过程！

我们终于知道如何摆脱 pending 状态和 undefined 值了！当我们调用 resolve 方法时，promise 的状态是 fulfilled。...当我们调用 reject 方法时，promise 的状态是 rejected。...我们现在能够创建隐式地返回一个对象的异步函数，而不是显式地使用 Promise 对象！这意味着我们不再需要写任何 Promise 对象了。...当我们等待 await 后的值返回一个 resolved 的 promise 时，通过 await 关键字，我们可以暂停异步函数。...函数体的执行被暂停，async函数中剩余的代码会在微任务中运行而不是一个常规任务！

2.1K1 0

前端面试题合集

需要注意的是，立即resolve()的 Promise 对象，是在本轮“事件循环”（event loop）的结束时执行，而不是在下一轮“事件循环”的开始时。...不是都说原始类型是存放在栈上的么，为什么此时却没有被销毁掉？接下来笔者会根据浏览器的表现来重新理解关于原始类型存放位置的说法。...（window）和它自己本身；fun2 函数的作用域指向全局作用域（window）、fun1 和它本身；而作用域是从最底层向上找，直到找到全局作用域 window 为止，如果全局还没有的话就会报错。...那是不是只有返回函数才算是产生了闭包呢？...变量提升当执行 JS 代码时，会生成执行环境，只要代码不是写在函数中的，就是在全局执行环境中，函数中的代码会产生函数执行环境，只此两种执行环境。

7912 0

Javascript之我也来手写一下Promise

当处于pending状态时：可以转换到已完成（fulfilled）或者已拒绝（rejected）状态。　　 2. 当处于fulfilled状态时：不可以改变状态。...一旦确定了status的结果，也就是status如果不是pending的话，就不能再修改status的状态了。我们继续，针对then方法的详细描述，当然，我们这个阶段，只需要其中的一部分。...2.3.2 如果x是一个promise，则采用它的状态。通常，只有当x的实现是符合本规范的要求时，才会知道它是不是一个真正的承诺。...因为我们可能再返回一个promise，直到最后不是一个promise，也就是规范中所说的，允许任意递归调用。　　...然后，我们在返回的函数内部又返回了一个Promise。

7844 0

关于网页优化这档事

页面压缩** 关于html页面压缩，这里介绍一个nodejs库：https://www.npmjs.com/package/html-minifier 接下来就用`html-minifier`写一端...nodejs`脚本: 首先执行`npm init`进行初始化，然后： npm install fs npm install path npm install node-getopt npm install html-minifier...创建脚本`uglyhtml.js` const fs = require(‘fs’); const path = require(“path”) var minify = require(‘html-minifier...) { if (html) { var result = minify(html, { // removeAttributeQuotes: true...一般情况下，我们会在图片url后面加上一个随机参数，但是更好地做法应该是加上图片的md5码，这样图片只有在修改过后才会及时刷新，而不是每次重新或者没有及时刷新 md5获取摘要也是一个很简单的命令： tm

7433 0

阿里前端一面必会面试题合集

BOM的核心是 window，而 window 对象具有双重角色，它既是通过 js 访问浏览器窗口的一个接口，又是一个 Global（全局）对象。...这意味着在网页中定义的任何对象，变量和函数，都作为全局对象的一个属性或者方法存在。...如果函数返回一个对象，那么new 这个函数调用返回这个函数的返回对象，否则返回 new 创建的新对象介绍下 promise 的特性、优缺点，内部是如何实现的，动手实现 Promise1）Promise基本特性...1、Promise有三种状态：pending(进行中)、fulfilled(已成功)、rejected(已失败)2、Promise对象接受一个回调函数作为参数, 该回调函数接受两个参数，分别是成功时的回调...需要注意的是，立即resolve()的 Promise 对象，是在本轮“事件循环”（event loop）的结束时执行，而不是在下一轮“事件循环”的开始时。

4393 0

这样回答前端面试题才能拿到offer2

，并且在此函数没有返回对象的情况下，返回这个新建的对象介绍下 promise 的特性、优缺点，内部是如何实现的，动手实现 Promise1）Promise基本特性1、Promise有三种状态：pending...需要注意的是，立即resolve()的 Promise 对象，是在本轮“事件循环”（event loop）的结束时执行，而不是在下一轮“事件循环”的开始时。...return 出来的是一个和 this 无关的对象时，new 命令会直接返回这个新对象，而不是通过 new 执行步骤生成的 this 对象但是这里要求构造函数必须是返回一个对象，如果返回的不是对象，那么还是会按照...会生成执行环境，只要代码不是写在函数中的，就是在全局执行环境中，函数中的代码会产生函数执行环境，只此两种执行环境。...当我们查找一个变量时，如果当前执行环境中没有找到，我们可以沿着作用域链向后查找作用域链的创建过程跟执行上下文的建立有关....作用域可以理解为变量的可访问性，总共分为三种类型，分别为：全局作用域函数作用域块级作用域

4824 0

前端一面高频面试题（附答案）

对于已经柯里化后的函数来说，当接收的参数数量与原函数的形参数量相同时，执行原函数；当接收的参数数量小于原函数的形参数量时，返回一个函数用于接收剩余的参数，直至接收的参数数量与形参数量一致，执行原函数。...需要注意的是，立即resolve()的 Promise 对象，是在本轮“事件循环”（event loop）的结束时执行，而不是在下一轮“事件循环”的开始时。...闭包作用：局部变量无法共享和长久的保存，而全局变量可能造成变量污染，所以我们希望有一种机制既可以长久的保存变量又不会造成全局污染。...实现要点：new 会产生一个新对象；新对象需要能够访问到构造函数的属性，所以需要重新指定它的原型；构造函数可能会显示返回；function objectFactory() { var obj =...需要完全读懂 Promise A+ 规范，不过从总体的实现上看，有如下几个点需要考虑到：then 需要支持链式调用，所以得返回一个新的 Promise；处理异步问题，所以得先用 onResolvedCallbacks

5642 0

高级前端开发者必会的34道Vue面试题解析（三）

前言通过前面的文章，我们认识了页面的响应是由Vue实例里的data函数所返回的数据变化而驱动，也重点学习了页面的响应与数据变化之间是是如何来联系起来的，并且分别在Vue2.x与3.x中，从零到一实现了两个版本下的数据变化驱动页面响应原理...熟悉React的同学，应该很快能想到多次执行setState函数时，页面render的渲染触发，实际上与上面所说的Vue的异步渲染有异曲同工之妙。 Vue为什么要异步渲染？...拿上面例子来说，当val第一次赋值时，页面会渲染出对应的文字，但是实际这个渲染变化会暂存，val第二次赋值时，再次暂存将要引起的变化，这些变化操作会被丢到异步API，Promise.then的回调函数中...5、nextTick函数的执行后，传入的flushSchedulerQueue函数又一次push进callbacks全局数组里，pending在初始情况下是false，这时候将触发timerFunc。...最后也从源码角度下了解到，Vue并非不能同步渲染，当我们的页面中需要同步渲染时，做适当的配置即可满足。

6544 0

Promise进阶——如何实现一个Promise库

fn函数；而如过当前Promise是rejecting状态，我们就会调用er函数。...大家到这里可能会奇怪，我们的this指向没有发生变化，但是为什么我们的this指向的是那个新的Promise，而不是原来的那个Promise呢？...我们在这里需要特别说明下的是，有些人会认为我们在调用then函数传入的两个回调函数fn和er时，当前Promise就结束了，其实并不是这样，我们是得到了fn或者er两个函数的返回值，再将值传递给下一个Promise...首先我们需要先创建一个新的Promise用于返回，保证后面用户调用then函数进行后续逻辑处理时可以设置新Promise的fn和er这两个回调函数。...当我们只要检测到数组中的Promise有一个已经转换到了resolve或者rejected状态（通过没有then函数来进行判断）时，就会立即出发新创建的Promise示例的状态从pending转换为resolving

1.5K2 0

校招前端二面面试题合集

，而不是样式。...this如果函数没有返回其他对象，那么 new 表达式中的函数调用会自动返回这个新对象外部js文件先加载还是onload先执行，为什么？...（1）Promise的实例有三个状态:Pending（进行中）Resolved（已完成）Rejected（已拒绝）当把一件事情交给promise时，它的状态就是Pending，任务完成了状态就变成了Resolved...Promise 是一个构造函数，接收一个函数作为参数，返回一个 Promise 实例。...，而不是样式。

6601 0

一步一步手写完美符合PromiseA+规范的Promise

Promise作为构造函数时，会将一个函数作为它的参数传入并且Promise是一个含有 then方法的函数基于此，先写一个最基本的 const PENDING = "pending"; const...调用.then时状态还处于 pending。...let x = onRejectedCallback(reason); + resolve(x); // 这里使用resolve而不是...; } 这里使用resolve而不是reject 是因为当我们在then方法中的onRejected 接收到了上一个错误，说明我们对预期的错误进行了处理，进行下一层传递时应该执行下一个then的onFulfilled...所以我们需要对此进行递归调用； 6. x 是一个 thenable 首先，Promise规范给出的的 thenable定义 'thenable' 是一个定义then方法的对象或者函数我们先来举几个栗子

4333 0

JavaScript 异步编程

链式调用注意一下几点 Promise对象的then方法会返回一个全新的Promise对象后面的then方法就是在为上一个then返回的Promise注册回调前面then方法中回调函数的返回值会作为后面...//promise => 出现异常的Promise对象 }) 一般不推荐使用，应该在代码中明确捕获每一个可能的异常，而不是丢给全局处理 Promise 的静态方法 //一个成功状态的Promise...Promise 中有三种状态分别为：pending -> fulfilled pending->rejected 3. resolve reject 函数用来更改状态 resolve:fulfilled...处理then方法可以被多次调用 9. then方法可以被链式调用后面then方法回调函数拿到的值是上一个then方法回调函数的返回值 10. then 返回值是普通值还是Promise对象 11....this指向不会被更改 this还会指向MyPromise对象 resolve = (value) => { //0 判断状态是不是pending 阻止向下执行

1.2K1 0

2021JavaScript面试题（最新）不定时更新（2021.11.6更新）

在第一次调用Generator函数的时候并不会执行函数内部的代码，而是会返回一个生成器对象。而每次调用next方法则将函数执行到下一个yield的位置，同时向外界返回yield关键字后面的结果。...在通过 Proxy 构造函数生成实例对象时，需要提供这两个参数。 target是目标对象， handler 是一个对象，声明了代理 target 的指定行为。...find() 方法为数组中的每个元素都调用一次函数执行：当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。...find() 方法为数组中的每个元素都调用一次函数执行：当数组中的元素在测试条件时返回 true 时, find() 返回符合条件的元素，之后的值不会再调用执行函数。...为什么使用懒加载懒加载的原理 为什么使用预加载实现预加载的方法预加载的应用场景预加载器的原理 为什么使用懒加载 1、优化用户体验，如果页面上所有图片都要加载并且数量很大，就需要等待很久，对用户体验不好

2.6K1 1

揭开 HMR 面纱，了解它在 client 端的实现

index.html 时，会经过 indexHtmlMiddleawre 的中间件，然后调用 transformIndexHtml 钩子去做 html 文件的处理，有一个内置的 html plugin...fetchUpdate 最后返回一个函数，通过 queueUpdate 保证回调函数的执行顺序跟 http 请求的一致： let pending = false let queued: Promise<...* 否则顺序可能因为 http 请求往返而不一致 */ async function queueUpdate(p: Promise void) | undefined>) { //...pending) { pending = true await Promise.resolve() pending = false const loading = [.....根据是否存在“死路”，是的话就向客户端发送 full-reload 命令，否则的话就发送 update 命令；当我们在浏览器在打开 vite server 链接时，会加载 index.html 文件。

5293 0

怎么理解JS Promise

这让异步方法可以像同步方法那样返回值，但并不是立即返回最终执行结果，而是一个能代表未来出现的结果的promise对象看完这段话我的内心一阵无语，我就只能怪我自己的理解能力好像没有达到水准一样，并不完全懂这段话在说什么...3.当我们把 promise 一切部署好后，我们就得用到这个 promise 了。我们定义一个 testFn 函数来调用 promise 。...如果传入的 onFulfilled 参数类型不是函数，则会在内部被替换为(x) => x ，即原样返回 promise 最终结果的函数 onRejected 当Promise变成拒绝状态（rejection...参数的值就是promise没有实现而调用reject()所返回的错误信息值在这个例子就是 err 。...当 isLiForget = false; 时: 当isLiForget = true; 时：三、Promise最主要的特色——链式调用 为什么使用Promise可以链式调用呢？

11.7K3 0

前端-ES6中promise的实现原理

这妞性格怎么样前面说了，计算机不是人，所以它许下的承诺，它一定会给你一个结果，不管这个承诺的结果是接受还是拒绝。所以，第一，promise一定会返回一个结果。...第三、promise的结果什么时候返回，你说了不算，你去泡妞的时候，妞也不一定当场就答应你吧，或许想个三、五天也说不定，这个主动权不是掌握在你手中的。...时，我们是用then方法去取结果，而promise就是个对象，那么上面的代码看起来应该这样写： function doSomething(){ console.log("a"); return...回到最初，为什么要用promise，想想回调地狱，再想想promise是怎么解决的，那就是then方法链式调用。...在实例化完成之后，此时去执行fn函数，scope=1，state，deferred不可用。第一，函数的作用域是在定义时就生成的，而不是在调用的时候。

6362 0

使用 Swift 实现 Promise

现在我们需要在Promise的实现中定义一个状态，其默认值为.pending。我们还需要一个私有函数，它能在当前还处于.pending状态时更新状态。...但当我们第二次调用then时，promise 还是没有被解决，依然处于.pending状态，于是，我们将回调擦除换成了新的。只有第二个回调会在将来被执行，第一个被忘记了。...这使得测试虽然通过，但只有一个断言而不是两个。解决办法也很简单，就是存储一个回调的数组，并在promise被解决时触发它们。让我们更新一下。...但我们还有个小问题需要修复：这个promise变量被传递给then的闭包所限制。我们不能将其作为函数的返回值。...NewValue而不是Promise。

1.3K2 0

社招前端经典手写面试题合集

，涉及到参数合并(类似函数柯里化)，因为 bind 需要返回一个函数，需要判断一些边界问题，以下是 bind 的实现bind 返回了一个函数，对于函数来说有两种方式调用，一种是直接调用，一种是通过 new...then 函数会返回一个 Promise 实例，并且该返回值是一个新的实例而不是之前的实例。...promise var promise2; // 规范 2.2.onResolved 和 onRejected 都为可选参数 // 如果类型不是函数需要忽略，同时也实现了透传 // Promise.resolve...* 同一个promise可以then多次(发布订阅模式) * 调用then时当前状态是等待态，需要将当前成功或失败的回调存放起来（订阅） * 调用resolve时将订阅函数进行执行（...== y 的情况下，只需要判断是否为NaN，如果x!==x，则说明x是NaN，同理y也一样 // x和y同时为NaN时，返回true return x !== x && y !

7374 0

打开Promise的正确姿势

通常我们多次异步操作需要依赖上一次异步操作的结果时，我们会这样写。...x)中 2.3.2.如果x是一个promise实例，则以x的状态作为promise的状态　 2.3.2.1.如果x的状态为pending，那么promise的状态也为pending，直到x的状态变化而变化...而当我们resolve(value)的时候就遵循Promise/A+中的2.3.4条规范，将value传递给了fulfilled状态的回调函数。另外，通过这里例子我们也可以发现。...当我们在promise1的回调方法中返回x的时候，相当于调用promise2.resolve(x)。...这就是Promise的状态透传特点，如果当前的promise实例没有绑定回调函数，或者绑定的不是函数，那么当前实例就会把其状态以及不可变值或者不可变原因传递给当前实例调用.then方法返回的新promise

7891 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭