草庐IT

javascript - ES6 promise 返回值的执行顺序

coder 2024-07-15 原文

试图理解 ES6 Promise 的执行顺序，我注意到链式处理程序的执行顺序受前一个处理程序返回值还是 Promise 的影响。

示例 

let a = Promise.resolve();
a.then(v => Promise.resolve("A")).then(v => console.log(v));
a.then(v => "B").then(v => console.log(v));


直接在 Chrome (v 61) 控制台中运行时的输出:

B
A



但是，当单击 Run code snippet按钮，我会得到订单A B反而。

上面的例子是在 ES6 中定义的执行顺序，还是取决于实现？

如果已定义，正确的输出应该是什么？

最佳答案

Promise.resolve被指定返回一个已解决的 promise (令人兴奋，对吧？25.4.4.5、25.4.1.5、25.4.1.3.)。 a.then()因此每次都立即将作业排入队列(25.4.5.3.1，第 8 步)。 .then()根据此规范，永远不会返回已履行的 promise (对于有趣的事情，请在您的 Chrome 控制台中尝试 Promise.resolve().then()¹)。

让我们将 promise 命名为 a.then(v => Promise.resolve("A"))及其一些相关的规范状态 p1 ²。这个.then()将要调用的作业排入队列 (25.4.2.1)a.then(v => Promise.resolve("A"))如上所述。

第一个.then(v => console.log(v))附加一个对应于 v => console.log(v) 的 promise react ₁ 待处理 promise 的履行 react 列表 p1 (仍然是 25.4.5.3.1)。

  • 现在队列是:
  • 完成 react 工作v => Promise.resolve("A")
  • p1 现在有 v => console.log(v) ₁ 在其完成 react 列表中

    • promise a.then(v => "B")可以是 p2 .它现在以相同的方式工作。
  • 现在队列是:
  • 完成 react 工作v => Promise.resolve("A")
  • 完成 react 工作v => "B"
  • p1 有 v => console.log(v) ₁ 在其完成 react 列表中
  • p2 现在有 v => console.log(v) 2 在其完成 react 列表中

    • 我们已经到了脚本的结尾。

    第一个job时，对应v => Promise.resolve("A") , 被出列并被调用(再次 25.4.2.1 )，一个 then在结果中找到(这是重要部分)，导致另一个作业被排入队列(25.4.1.3.2，步骤 12)，无论该结果的 promise 状态如何。
  • 现在队列是:
  • 完成 react 工作v => "B"
  • 调用Promise.resolve("A").then与 p1 的 [[Resolve]] 和 [[Reject]]
  • p1 有 v => console.log(v) ₁ 在其完成 react 列表中
  • p2 有 v => console.log(v) 2 在其完成 react 列表中

    • 下一个作业出队并被调用。可调用 then结果上找不到，所以 p2 立即完成(25.4.1.3.2 再次，步骤 11a)并为每个 排入一个作业p2 的满足 react 。
  • 现在队列如下:
  • 调用Promise.resolve("A").then与 p1 的 [[Resolve]] 和 [[Reject]]
  • 调用(通过25.4.2.1)v => console.log(v) 2
  • p1 有 v => console.log(v) ₁ 在其完成 react 列表中

    • 我将在这里停止这种级别的解释，如 Promise.resolve("A").then开始整个 then再次排序。但是，您可以看到它的去向:作业队列是一个队列，一个将产生输出的函数在队列中，而另一个尚未添加。队列中的那个将首先运行。

    正确的输出是 B 后跟 A。

    那么，既然如此，为什么 Chrome 中的答案本身在一个页面中是错误的？这不是一些 Stack Overflow 片段 shim；您可以自己或在 Node.js 中使用一些 HTML 来重现它。我的猜测是这是一个破坏规范的优化。

    'use strict';

class Foo extends Promise {}

let a = Promise.resolve();
a.then(v => Foo.resolve("A")).then(v => console.log(v));
a.then(v => "B").then(v => console.log(v));

    thenable 的替代定义带着这个乐趣node --allow_natives_syntax脚本!
    'use strict';

const thenable = p => ({ then: p.then.bind(p) });
//const thenable = p => p;

let a = Promise.resolve();
a.then(v => {
    %EnqueueMicrotask(() => {
        %EnqueueMicrotask(() => {
            console.log("A should not have been logged yet");
        });
    });

    return thenable(Promise.resolve("A"));
}).then(v => console.log(v));
a.then(v => "B").then(v => console.log(v));

    ¹ 对于后代:这是 Chrome 61.0.3163.100 中已解决的 promise 。
    ² 这不如规范具体，但这是试图描述规范而不是规范的答案。运气好的话，它也是正确的。

    关于javascript - ES6 promise 返回值的执行顺序，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/46408228/

    javascriptpromisecodestrongthenecmascript-6es6-promise

    有关javascript - ES6 promise 返回值的执行顺序的更多相关文章

    1. ruby - 为什么 4.1%2 使用 Ruby 返回 0.0999999999999996？但是 4.2%2==0.2 - 2

      为什么4.1%2返回0.0999999999999996？但是4.2%2==0.2。 最佳答案 参见此处:WhatEveryProgrammerShouldKnowAboutFloating-PointArithmetic实数是无限的。计算机使用的位数有限(今天是32位、64位)。因此计算机进行的浮点运算不能代表所有的实数。0.1是这些数字之一。请注意，这不是与Ruby相关的问题，而是与所有编程语言相关的问题，因为它来自计算机表示实数的方式。 关于ruby-为什么4.1%2使用Ruby返

    2. ruby - 检查字符串是否包含散列中的任何键并返回它包含的键的值 - 2

      我有一个包含多个键的散列和一个字符串，该字符串不包含散列中的任何键或包含一个键。h={"k1"=>"v1","k2"=>"v2","k3"=>"v3"}s="thisisanexamplestringthatmightoccurwithakeysomewhereinthestringk1(withspecialcharacterslike(^&*$#@!^&&*))"检查s是否包含h中的任何键的最佳方法是什么，如果包含，则返回它包含的键的值？例如，对于上面的h和s的例子，输出应该是v1。编辑:只有字符串是用户定义的。哈希将始终相同。 最佳答案

    3. ruby - Ruby 中的隐式返回值是怎么回事？ - 2

      所以我开始关注ruby​​，很多东西看起来不错，但我对隐式return语句很反感。我理解默认情况下让所有内容返回self或nil但不是语句的最后一个值。对我来说，它看起来非常脆弱(尤其是)如果你正在使用一个不打算返回某些东西的方法(尤其是一个改变状态/破坏性方法的函数!)，其他人可能最终依赖于一个返回对方法的目的并不重要，并且有很大的改变机会。隐式返回有什么意义？有没有办法让事情变得更简单？总是有返回以防止隐含返回被认为是好的做法吗？我是不是太担心这个了？附言当人们想要从方法中返回特定的东西时，他们是否经常使用隐式返回，这不是让你组中的其他人更容易破坏彼此的代码吗？当然，记录一切并给出

    4. ruby-on-rails - ruby 日期方程不返回预期的真值 - 2

      为什么以下不同？Time.now.end_of_day==Time.now.end_of_day-0.days#falseTime.now.end_of_day.to_s==Time.now.end_of_day-0.days.to_s#true 最佳答案 因为纳秒数不同:ruby-1.9.2-p180:014>(Time.now.end_of_day-0.days).nsec=>999999000ruby-1.9.2-p180:015>Time.now.end_of_day.nsec=>999999998

    5. ruby - 从 String#split 返回的零长度字符串 - 2

      在Ruby1.9.3(可能还有更早的版本，不确定)中，我试图弄清楚为什么Ruby的String#split方法会给我某些结果。我得到的结果似乎与我的预期相反。这是一个例子:"abcabc".split("b")#=>["a","ca","c"]"abcabc".split("a")#=>["","bc","bc"]"abcabc".split("c")#=>["ab","ab"]在这里，第一个示例返回的正是我所期望的。但在第二个示例中，我很困惑为什么#split返回零长度字符串作为返回数组的第一个值。这是什么原因呢？这是我所期望的:"abcabc".split("a")#=>["bc"

    6. 使用canal同步MySQL数据到ES - 2

      文章目录一、概述简介原理模块二、配置Mysql使用版本环境要求1.操作系统2.mysql要求三、配置canal-server离线下载在线下载上传解压修改配置单机配置集群配置分库分表配置1.修改全局配置2.实例配置垂直分库水平分库3.修改group-instance.xml4.启动监听四、配置canal-adapter1修改启动配置2配置映射文件3启动ES数据同步查询所有订阅同步数据同步开关启动4.验证五、配置canal-admin一、概述简介canal是Alibaba旗下的一款开源项目，Java开发。基于数据库增量日志解析，提供增量数据订阅&消费。Git地址：https://github.co

    7. ES基础入门 - 2

      ES一、简介1、ElasticStackES技术栈：ElasticSearch：存数据+搜索；QL；Kibana：Web可视化平台，分析。LogStash：日志收集，Log4j:产生日志；log.info(xxx)。。。。使用场景：metrics：指标监控…2、基本概念Index（索引）动词：保存（插入）名词：类似MySQL数据库，给数据Type（类型）已废弃，以前类似MySQL的表现在用索引对数据分类Document（文档）真正要保存的一个JSON数据{name:"tcx"}二、入门实战{"name":"DESKTOP-1TSVGKG","cluster_name":"elasticsear

    8. ruby - 为什么 Integer.respond_to?( :even? ) 返回 false？ - 2

      我一直在研究RubyKoans，我发现about_open_classes.rbkoan很有趣。特别是他们修改Integer#even?方法的最后一个测试。我想尝试一下这个概念，所以我打开了Irb并尝试运行Integer.respond_to?(:even?)，但令我惊讶的是我得到了错误。然后我尝试了Fixnum.respond_to?(:even?)并得到了错误。我还尝试了Integer.respond_to?(:respond_to?)并得到了true，当我执行2.even?时，我也得到了true。我不知道发生了什么。谁能告诉我缺少什么？ 最佳答案

    9. ruby - Time.to_i 是否总是以 UTC 返回自 EPOCH 以来的秒数？ - 2

      无论时间在哪个时区表示，时区差异是否总是被忽略？直觉上，对于那些使用UTC+2的人来说，从EPOCH开始经过的秒数应该更高。然而，事实并非如此。 最佳答案 Epoch基于utc时区https://en.wikipedia.org/wiki/Unix_time它与您当前所在的时区无关。 关于ruby-Time.to_i是否总是以UTC返回自EPOCH以来的秒数？，我们在StackOverflow上找到一个类似的问题： https://stackoverflow.

    10. ruby-on-rails - 使用 javascript 更改数据方法不会更改 ajax 调用用户的什么方法？ - 2

      我遇到了一个非常奇怪的问题，我很难解决。在我看来，我有一个与data-remote="true"和data-method="delete"的链接。当我单击该链接时，我可以看到对我的Rails服务器的DELETE请求。返回的JS代码会更改此链接的属性，其中包括href和data-method。再次单击此链接后，我的服务器收到了对新href的请求，但使用的是旧的data-method，即使我已将其从DELETE到POST(它仍然发送一个DELETE请求)。但是，如果我刷新页面，HTML与"new"HTML相同(随返回的JS发生变化)，但它实际上发送了正确的请求类型。这就是这个问题令我困惑的

    随机推荐