开发者社区

文档建议反馈控制台

最新优惠活动

文章/答案/技术大牛

发布

在浏览器上执行不同的promise，发生了什么？

在浏览器上执行不同的promise时，会发生以下过程：

创建Promise对象：通过调用Promise构造函数，创建一个新的Promise对象。Promise是ES6中引入的一种用于处理异步操作的机制。
立即执行Promise的执行器函数：Promise的执行器函数会立即执行，接收两个参数resolve和reject。它用于定义异步操作的处理逻辑，并在操作完成时调用resolve或reject函数。
异步操作的执行：在执行器函数中定义的异步操作开始执行，比如发送网络请求、读取文件等。这个异步操作不会阻塞主线程，浏览器会继续执行其他的任务。
Promise的状态变化：异步操作执行期间，Promise的状态可能会从pending（进行中）变为fulfilled（已完成）或rejected（已拒绝）。当异步操作成功完成时，调用resolve函数将Promise状态变为fulfilled；当异步操作出现错误或失败时，调用reject函数将Promise状态变为rejected。
注册回调函数：可以通过Promise的then方法注册回调函数，分别处理异步操作成功和失败的情况。then方法接收两个参数，第一个参数是异步操作成功时的回调函数，第二个参数是异步操作失败时的回调函数。
异步操作完成后的处理：当异步操作完成并且Promise状态变为fulfilled时，会调用成功时的回调函数。如果存在链式调用的多个then方法，上一个then方法返回的Promise对象会作为参数传递给下一个then方法。
异步操作失败的处理：当异步操作出现错误或失败，并且Promise状态变为rejected时，会调用失败时的回调函数。可以通过Promise的catch方法或者在then方法的第二个参数中捕获错误并处理。

总结起来，浏览器上执行不同的Promise会经历Promise对象的创建，异步操作的执行，Promise状态的变化，回调函数的注册和执行等过程。这种方式可以更好地处理和组织异步操作，使得代码更加可读和可维护。

推荐的腾讯云相关产品：腾讯云函数（云原生 Serverless 服务），腾讯云数据库 MySQL 版（关系型数据库服务），腾讯云对象存储（分布式对象存储服务）。可以通过以下链接获取更详细的产品介绍和使用说明：

腾讯云函数：https://cloud.tencent.com/product/scf
腾讯云数据库 MySQL 版：https://cloud.tencent.com/product/cdb
腾讯云对象存储：https://cloud.tencent.com/product/cos

相关搜索:.then在“pending”上执行而不是在已解析的Promise上执行图形生命周期通知-通知URL上的404发生了什么？为什么锁在不同的对象上执行？php在浏览器或命令行上的执行方式不同在iOS中执行`UIApplication.shared.registerForRemoteNotifications()`的幕后发生了什么？Stopwatch.GetTimestamp()在linux和windows上产生了不同的结果。如何使用单个按钮在不同的面板上执行不同的操作？SVG在firefox上运行良好，但它在其他浏览器上的定位发生了变化 print.css在不同的浏览器上看起来不同代码在Windows和Android上的执行方式不同为什么html实体在不同的浏览器中会有不同的处理？为什么Cloudflare worker上的站点预览与浏览器不同？在不同行上的字段之间执行DATEDIFF的查询为什么我的gradle构建的shellscript执行在jenkins上的行为与在cli上的不同？使用pytest在不同的浏览器上运行Selenium测试如何使用python在excels(不同的列名)上执行vlookup 为什么内核在不同的流中执行不是并行的？为什么我的字体大小在firefox和chrome移动浏览器上显示不同？Hapi js cookie TTL在浏览器上显示不同的值 JavaScript图像滑块在每个浏览器上的作用不同

相关搜索:

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

有帮助

没帮助

相关·内容

为什么同样的WPF控件在不同的电脑上呈现外观不一致

今天有同事跑过来说遇到了一个奇怪的bug，同样的程序在win7和win10上界面相差了2个像素 ---- 一开始我们以为是半像素或者是分辨率的问题。结果调试了很久都没有结果。...不过意外的我们发现了另一个奇妙的东西。...下面两个图分别是在win7和win10情况下soonp获得的可视化树（已用demo替换） image.png image.png 有么有发现TabControl的子元素Grid多出了一个名字templateRoot...在代码里面查找，发现并没有这个名字的Grid，所以可以确定这个是来自TabControl的默认Style 所以我们找到win7和win10 下的默认主题 Aero和Aero2 查找方法可以参见博客默认的...当然对于这样子的问题的确不是很好定位，因此我们有两种可行的解决方案 1、尽量在关键界面使用自定义样式，对元素的呈现细节进行控制 2、在App.xaml中指定主题样式。

1.2K2 0

大数据告诉你在微博上发什么样的自拍照最能吸引异性？

数据说明，从女性收到新来信的数量上来看，这种45度角的照片是最有效的。实际上比直接晒胸的图片好。 ?...女性晒乳沟相当于男性晒肌肉，数据表明这很有用，比一般照片吸引的新来信多49%。但是跟晒肌肉不同，年纪越大，晒乳沟的好处就越大。女性年纪越大收到的来信就越少，但是对于乳沟照，这种减少的趋势缓慢很多。...不露脸也可以，只要你能展示一些不寻常的，性感的，或具有神秘感的东西，令别人想要跟你攀谈。 ? 上面这几张图都收到比一般人多得多的来信，虽然他们并没有什么突出的个人介绍。...他们从不同方面引起别人的好奇心，并由此产生了许多来信。网友趣评研究数据来自于“长相一般”的人。网站打分满分为5分，本次调查的人的分数全部在1.5-3.5之间。附原文下部分网友的评论，也很有意思。...有人说：噢，我马上上传了我赤裸上身的照片。背后算吗？有人说：你跟我说晒肌肉真的有用？我对女人失去信心了。有人说：笑尿了。有人说：基佬和拉拉也这样看吗？还是会有完全不同的看法？

2.1K6 0

【DB笔试面试258】在Oracle中，执行计划里的access和filter有什么区别（上）？

题目如下所示：在Oracle中，执行计划里的access和filter有什么区别？...MGR" IS NOT NULL) 一般而言，access表示这个谓词条件的值将会影响数据的访问路径（表还是索引）；filter表示谓词条件的值不会影响数据的访问路劲，只起到过滤的作用。...但是一旦重复匹配的较少，循环次数多，那么，filter操作将是严重影响性能的操作，可能会导致目标SQL几天都执行不完。...操作只有一个子节点ID2，在这种情况下的filter操作也就是单纯的过滤操作。...OBJECT_TYPE 'TABLE')); SELECT * FROM TABLE(DBMS_XPLAN.DISPLAY_CURSOR(NULL,NULL,'allstats last')); 具体执行计划

1.3K2 0

初识Promise

什么是promise？MDN官方文档的解释如下： Promise 对象用于一个异步操作的最终完成（或失败）及其结果值的表示。...这就是promise的中文含义：诺言，一个成功，一个失败。那Promise在js中到底是个什么东西呢？...有人可能会问这有什么用，我直接实行console.log(1)不就行了，干嘛要包在Promise里面呢，什么鬼？这个需要回到Promise的作用上面来。 Promise的作用是什么？...console.log(data); console.log('直接执行catch,所有的then都不会执行') }) 读代码，在发请柬和幸福的生活在一起之间咱们插入了一个then，里面的函数呢返回了一个...看下运行结果：或者可以看出，在then链的调用中，某个then返回另外一个promise实例，且也是按照随机数来变换promise的状态的。

5332 0

我以为我很懂Promise，直到我开始实现PromiseA+规范

rAF的调用时机是在下一次浏览器重绘之前，这看起来和微任务的调用时机差不多，曾让我一度认为rAF是微任务，而实际上rAF也不是微任务。为什么这么说呢？请运行下这段代码。...最初，我认为既然浏览器区分了Task和Microtask，那就只要各自安排一个队列存储任务即可。事实上，Task根据task source的不同，安排了独立的队列。...对于这种说法，我觉得自己有个概念就行，不同浏览器在实现规范的细节上肯定不一样，具体通信过程也不详，是不是4ms也不好说，关键是你有没有搞清楚这背后经历了什么。...那么这背后的执行顺序到底是怎样的呢？仔细分析下，你会发现还是有迹可循的。老规矩，第一个问题，这道题的代码执行过程中，产生了多少个微任务？可能很多人认为是7个，但实际上应该是8个。...经过我在Edge浏览器测试，结果是：0 1 2 4 3 5 6。可以看到，不同浏览器在实现Promise的主流程上是吻合的，但是在一些细枝末节上还有不一致的地方。

7814 1

我以为我很懂Promise，直到我开始实现PromiseA+规范

rAF的调用时机是在下一次浏览器重绘之前，这看起来和微任务的调用时机差不多，曾让我一度认为rAF是微任务，而实际上rAF也不是微任务。为什么这么说呢？请运行下这段代码。...最初，我认为既然浏览器区分了Task和Microtask，那就只要各自安排一个队列存储任务即可。事实上，Task根据task source的不同，安排了独立的队列。...对于这种说法，我觉得自己有个概念就行，不同浏览器在实现规范的细节上肯定不一样，具体通信过程也不详，是不是4ms也不好说，关键是你有没有搞清楚这背后经历了什么。...仔细分析下，你会发现还是有迹可循的。老规矩，第一个问题，这道题的代码执行过程中，产生了多少个微任务？可能很多人认为是7个，但实际上应该是8个。...经过我在Edge浏览器测试，结果是：0 1 2 4 3 5 6。可以看到，不同浏览器在实现Promise的主流程上是吻合的，但是在一些细枝末节上还有不一致的地方。

6323 0

高频面试题：JavaScript事件循环机制解析

然后会问分别说说浏览器的node的事件循环，区别是什么，什么是宏任务和微任务，为什么要有这两种任务... 本篇文章参考了很多文章，同时加上自己的理解，如果有问题希望大家指出。...事件循环 JavaScript是单线程，非阻塞的 浏览器的事件循环执行栈和事件队列宏任务和微任务 node环境下的事件循环和浏览器环境有何不同事件循环模型宏任务和微任务经典题目分析 1....：执行宏任务，然后执行该宏任务产生的微任务，若微任务在执行过程中产生了新的微任务，则继续执行微任务，微任务执行完毕后，再回到宏任务中进行下一轮循环。...最后的执行结果如下 start end promise1 promise2 setTimeout node环境下的事件循环和浏览器环境有何不同表现出的状态与浏览器大致相同。...setImmediate： setImmediate()方法从意义上将是立刻执行的意思，但是实际上它却是在一个固定的阶段才会执行回调，即poll阶段之后。经典题目分析一.

1.2K4 0

你不知道的 Event Loop

JS运行机制图上图是一张 JS 的运行机制图，Js 运行时大致会分为几个部分： Call Stack：调用栈(执行栈)，所有同步任务在主线程上执行，形成一个执行栈，因为 JS 单线程的原因，所以调用栈中每次只能执行一个任务...如果产生了宏任务，将宏任务放入宏任务队列，下次轮循的时候执行如果产生了微任务，将微任务放入微任务队列执行完当前宏任务之后，取出微任务队列中的所有任务依次执行如果微任务执行过程中产生了新的微任务，...不能只是默许接受这个概念，在这里，我根据我的个人理解进行一番说(hu)明(che) 宏任务和微任务的真面目其实在 Chrome 的源码中并没有什么宏任务和微任务的代码或是说明，在 JS 大会[3]上提到过微任务这个名词...五、Node 中的 Event Loop Node 中也有宏任务和微任务，与浏览器中的事件循环类似。Node 与浏览器事件循环不同，其中有多个宏任务队列，而浏览器是只有一个宏任务队列。...小结 Node 和端浏览器端有什么不同 浏览器端的 Event Loop 和 Node.js 中的 Event Loop 是不同的，实现机制也不一样 Node.js 可以理解成有4个宏任务队列和2个微任务队列

8561 1

axios面试题总结

axios 是什么 1. Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。...基于 promise 的异步 ajax 请求库，支持promise所有的API 2. 浏览器端/node 端都可以使用，浏览器中创建XMLHttpRequests 3. 支持请求／响应拦截器 4....): 是否是一个取消请求的错误 axios.all(promises): 用于批量执行多个异步请求 axios.spread(): 用来指定接收所有成功数据的回调函数的方法 axios为什么既能在浏览器环境运行又能在服务器...axios在浏览器端使用XMLHttpRequest对象发送ajax请求；在node环境使用http对象发送ajax请求。...原来作者是通过判断XMLHttpRequest和process这两个全局变量来判断程序的运行环境的，从而在不同的环境提供不同的http请求模块，实现客户端和服务端程序的兼容。

6672 0

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

对于不同版本的采用不同的连接方式：在HTTP/1.0 每发起一个请求，都要新建一次 TCP 连接（三次握手），而且是串行请求，做了无畏的 TCP 连接建立和断开，增加了通信开销。...队头堵塞HTTP 传输的报文必须是一发一收，但是，里面的任务被放在一个任务队列中串行执行，一旦队首的请求处理太慢，就会阻塞后面请求的处理。这就是HTTP队头阻塞问题。...（4）race()race方法和all一样，接受的参数是一个每项都是promise的数组，但是与all不同的是，当最先执行完的事件执行完之后，就直接返回该promise对象的值。...，并且在此函数没有返回对象的情况下，返回这个新建的对象Promise解决了什么问题在工作中经常会碰到这样一个需求，比如我使用ajax发一个A请求后，成功后拿到数据，需要把数据传给B请求；那么需要如下编写代码...1px 问题指的是：在一些 Retina屏幕的机型上，移动端页面的 1px 会变得很粗，呈现出不止 1px 的效果。原因很简单——CSS 中的 1px 并不能和移动设备上的 1px 划等号。

3884 0

axios + ajax 面试题总结

axios 是什么 1. Axios 是一个基于 promise 的 HTTP 库，可以用在浏览器和 node.js 中。...基于 promise 的异步 ajax 请求库，支持promise所有的API 2. 浏览器端/node 端都可以使用，浏览器中创建XMLHttpRequests 3. 支持请求／响应拦截器 4....): 是否是一个取消请求的错误 axios.all(promises): 用于批量执行多个异步请求 axios.spread(): 用来指定接收所有成功数据的回调函数的方法 axios为什么既能在浏览器环境运行又能在服务器...AJAX应用和传统Web应用有什么不同在传统的Javascript编程中，如果想得到服务器端数据库或文件上的信息，或者发送客户端信息到服务器，需要建立一个HTML form然后GET或者POST数据到服务器端...在一般的web开发中，javascript是在浏览器端执行的，我们可以用javascript控制浏览器的行为和内容。

2.1K3 0

前端开发面试如何答题才能让面试官满意

值得注意的是，和⼤多数浏览器不同，Chrome 浏览器的每个标签⻚都分别对应⼀个呈现引擎实例。每个标签⻚都是⼀个独⽴的进程。...小结一下现在，如果再让你回答什么是闭包，你能答出多少？其实，大家说的都对。不管是函数返回一个函数，还是产生了外部作用域的引用，都是有道理的。所以，什么是闭包？解释一下作用域链是如何产生的。...如果改变已经发生了，你再对promise对象添加回调函数，也会立即得到这个结果。这与事件（event）完全不同，事件的特点是：如果你错过了它，再去监听是得不到结果的。...注意：在构造 Promise 的时候，构造函数内部的代码是立即执行的什么是闭包，闭包的作用是什么当一个内部函数被调用，就会形成闭包，闭包就是能够读取其他函数内部变量的函数。...@media 可以针对不同的屏幕尺寸设置不同的样式，特别是需要设置设计响应式的页面，@media 是非常有用的。当重置浏览器大小的过程中，页面也会根据浏览器的宽度和高度重新渲染页面。

1.3K2 0

JavaScript 事件循环：从起源到浏览器再到 Node.js

事件循环是什么所以说事件循环本质是一个 user agent 上协调各类事件的机制，而这一节我们主要讨论一下浏览器中的这个机制与 JavaScript 的交互部分。...不同事件源的队列可以有不同的优先级（例如在网络事件和用户交互之间，浏览器可以优先处理鼠标行为，从而让用户感觉更加流程）。...().then(function() { console.log('promise2'); }); }); 这个例子在浏览器端执行的结果是 timer1 -> promise1 ->...另外我们知道网络 IO 可能有非常多的请求同时进来，如果该阶段如果无限制的执行这些 callback，可能导致 Node.js 的进程卡死该阶段，其他外部队列的代码都没发执行了。...事件循环的设计初衷更多的是方便 JavaScript 与其嵌入环境的交互，所以事件循环如何运作，也更多的会受到 JavaScript 嵌入环境的影响，不同的设备、嵌入式环境甚至是不同的浏览器都会有各自的想法

1.1K3 0

任务，微任务，队列和时间表

事件循环具有多个任务源，这些任务源保证了该源中的执行顺序（如IndexedDB之类的规范定义了它们的执行顺序），但是浏览器可以在循环的每个循环中选择从哪个源中执行任务。...这就是为什么promise1并promise2在之后记录日志的原因script end，因为当前正在运行的脚本必须在处理微任务之前完成。...'); }); console.log('script end'); 一些浏览器的功能有何不同？...Firefox和Safari正确耗尽了点击侦听器之间的微任务队列，如突变回调所示，但承诺的排队似乎不同。鉴于工作和微任务之间的联系模糊，这是可以原谅的，但我仍然希望它们在侦听器回调之间执行。...实际上，您可以在Firefox中解决此问题，因为诸如es6-promise之类的承诺填充将突变观察者用于回调，而回调正确地使用了微任务。

2.2K2 0

动图学JS异步: Promises & AsyncAwait

有趣的是，我让Jake Archibald校对这篇文章时，他实际上指出，在Chrome浏览器目前的状态显示为resolved，而不是fulfilled的错误。 ?...，接下来打印出的却是End!而不是promise中的value。最后打印的是Promise!，这里面究竟发生了什么？我们终于认识到promise的真正能量！?...那么什么是宏任务队列，什么是微任务队列？虽然实际上存在的比我下面列出来的多，但是在下面的表格中都是我们最常见的！ ?...事件循环对于这些任务给出了不同的优先级。 1.所有函数都是在当前调用栈执行，当它们返回一个值时候，就会从调用栈弹出。...让我们看看当我们运行下面的代码块会发生什么： ? 嗯..这里发生了什么？ ? 首先，JS引擎执行到console.log。它被弹出到调用堆栈，然后执行，打印结果Before function!

1.1K2 0

不愧是前端老油条，分分钟看出我方案的bug

点击上方关注前端技术江湖，一起学习，天天进步国庆前刚开发完一个小需求，常规性的做了一次code review，不过这次review有所不同，我们组前端老油条竟然参会了，平时发会邀都不来的。...需求超简单，上截图 image.png 上面是一个分类数据展示页面，左侧是一级分类，右侧二级分类和三级分类，然后下面是推荐的商品列表。就这样一个页面会有什么问题呢？...问题在于交互上，左边的一级分类可以随意切换，如果用户不讲武德，不等右边的数据渲染完就切换了，那会给用户带来什么体验呢？会导致渲染结果混乱，旧数据渲染在了新的分类里。...Promise.race() 简单复习下race方法的作用,当有若干个promise, p1, p2, p3…在调用， let p = Promise.race([p1, p2, p3,…])的时候，...另外fetch api虽然增加了新的标准实现（AbortSignal），但仍然存在兼容问题，而且只能在浏览器中使用。那么非浏览器的环境中呢？比如RN？小程序？

1922 0

社招中级前端笔试面试题总结_2023-02-28

await通过返回一个Promise对象来实现同步的效果。什么是回调函数？回调函数有什么缺点？如何解决回调地狱问题？...Sass、Less 是什么？为什么要使用他们？他们都是 CSS 预处理器，是 CSS 上的一种抽象层。他们是一种特殊的语法/语言编译成 CSS。...为什么要使用它们？结构清晰，便于扩展。可以方便地屏蔽浏览器私有语法差异。封装对浏览器语法差异的重复处理，减少无意义的机械劳动。可以轻松实现多重继承。...LESS 只是在 CSS 语法上做了扩展，所以老的 CSS 代码也可以与 LESS 代码一同编译。 await 到底在等啥？ await 在等待什么呢？...css不会修改文档的结构，如果这样的话，似乎看起来css样式不会阻塞浏览器html解析。但是事实上 css样式表是阻塞的。

4082 0

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

事实上，它只是让我感觉 Promise 是一个奇怪的、模糊的、不可预测的一段魔法。接下来让我们看看 promise 真正是什么？...在最前一行输出！然而，第二个被打印的值是 End!，并不是 promise 被解决的值！只有在 End! 被打印之后，promise 的值才会被打印。这里发生了什么？...那么什么时候执行 then()，catch()，或 finally() 内的回调呢？事件循环给与任务不同的优先级：当前在调用栈 (call stack) 内的所有函数会被执行。...很好，但这到底是什么意思？当我们运行下面的代码块时让我们看下发生了什么：额，这里发生了什么呢？首先，JavaScript 引擎遇到了 console.log。...你注意到async函数相比于promise的then有什么不同吗？await关键字暂停了async函数，然而如果我们使用then的话，Promise的主体将会继续被执行！嗯，这是相当多的信息！

2.1K1 0

一位摸金校尉决定转行前端

曹操为了弥补军饷的不足，设立发丘中郎将，摸金校尉等军衔，专司盗墓取财，贴补军饷。曹操之后，盗墓者皆各自为政，同行之间并无师徒之分，凡以摸金之法盗墓，均为摸金校尉。...事实上，不像小说里靠“主角光环”每每死里逃生，我们有严谨的工作流程。高风险，收益不确定。随着时间推移，从业者越来越少。最近我也决定转行当前端了。...就像做事后的琐碎工作。每当执行完task，在执行下一个task前，都需要检查microTask queue，执行并清空里面的microTask。 ?...全局代码执行和setTimeout为不同的2个task。如果这2个task在同一帧中执行，则页面渲染一次，直接显示黑色（如下图情况一）。...requestAnimationFrame 可以发现，task没有办法精准的控制执行时机。那么有什么办法可以保证代码在每一帧都执行呢？

4651 0

有哪些前端面试题是必须要掌握的_2023-02-27

，调用定时器 promise click事件...不会立即执行，需要等待当前代码全部执行完毕给异步方法划分队列，分别存放到微任务（立即存放）和宏任务（时间到了或事情发生了才存放）到队列中 script...比如，假定JavaScript同时有两个线程，一个线程在某个DOM节点上添加内容，另一个线程删除了这个节点，这时浏览器应该以哪个线程为准？...下面是我个人推荐的回答：首先js 是单线程运行的，在代码执行的时候，通过将不同函数的执行上下文压入执行栈中来保证代码的有序执行在执行同步代码的时候，如果遇到了异步事件，js 引擎并不会一直等待其返回结果...Node.js 和浏览器端宏任务队列的另一个很重要的不同点是，浏览器端任务队列每轮事件循环仅出队一个回调函数接着去执行微任务队列；而 Node.js 端只要轮到执行某个宏任务队列，则会执行完队列中所有的当前任务...().then(function() { console.log('promise2') }) }, 0) // 以上代码在浏览器和 node 中打印情况是不同的 // 浏览器中一定打印

5832 0

点击加载更多

扫码

添加站长进交流群

领取专属 10元无门槛券

手把手带您无忧上云

扫码加入开发者社群

相关资讯

热门标签

活动推荐

运营活动

活动名称

广告关闭