javascript - 为什么仅调用同步函数时 javascript promises 是异步的?

标签 javascript asynchronous promise synchronous

在测试中,我发现 JavaScript Promises 总是是异步的,无论它们的链中是否包含任何异步函数。

这里是一些代码,显示了控制台中的操作顺序。如果你运行它,你会看到即使每个函数都是同步的,输出显示两个 aPromise() 调用是并行运行的,并且 “令人惊讶的是,这是在运行 2 完成后发生的” 在运行 2 完成之前发生。

function aPromise() {
  return new Promise(function(resolve, reject) {
    console.log("making promise A")
    resolve(bPromise());
    console.log("promise A resolved")
  });
}


function bPromise() {
  return new Promise(function(resolve, reject) {
    console.log("making and resolving promise B")
    resolve();
  });
}

aPromise().then(function() {
  console.log("finish run 1");
}).then(function() {
  console.log("surprisingly this happens after run 2 finishes");
});
aPromise().then(function() {
  console.log("finish run 2");
})

输出到控制台:

making promise A
making and resolving promise B
promise A resolved
making promise A
making and resolving promise B
promise A resolved
finish run 1
finish run 2
surprisingly this happens after run 2 finishes

那么,为什么在仅调用同步函数时 JavaScript promises 是异步的?导致此行为的幕后发生了什么?


附言为了更好地理解这一点,我实现了自己的 Promise 系统,我发现让同步函数以预期的顺序发生很容易,但让它们并行发生是我只能通过每次设置几毫秒的 setTimeout() 来完成的解决(我的猜测是,这不是普通 promise 所发生的事情,它们实际上是多线程的)。

这对我的一个程序来说是个小问题,我正在遍历一棵树,将一组函数应用于每个节点,如果该节点已经运行了一个异步函数,则将这些函数放入队列中。大多数功能都是同步的,因此很少使用队列,但是在从回调( hell )切换到 Promises 后,我遇到了一个问题,即由于 Promises 从不同步运行,队列几乎总是被使用。这不是一个大问题,但有点像调试噩梦。

1 年后编辑

我最终写了一些代码来处理这个问题。它不是非常彻底,但我已经成功地使用它来解决我遇到的问题。

var SyncPromise = function(fn) {
    var syncable = this;
    syncable.state = "pending";
    syncable.value;

    var wrappedFn = function(resolve, reject) {
        var fakeResolve = function(val) {
            syncable.value = val;
            syncable.state = "fulfilled";
            resolve(val);
        }

        fn(fakeResolve, reject);
    }

    var out = new Promise(wrappedFn);
    out.syncable = syncable;
    return out;
}

SyncPromise.resolved = function(result) {
    return new SyncPromise(function(resolve) { resolve(result); });
}

SyncPromise.all = function(promises) {
    for(var i = 0; i < promises.length; i++) {
        if(promises[i].syncable && promises[i].syncable.state == "fulfilled") {
            promises.splice(i, 1);
            i--;
        }
        // else console.log("syncable not fulfilled" + promises[i].syncable.state)
    }

    if(promises.length == 0)
        return SyncPromise.resolved();

    else
        return new SyncPromise(function(resolve) { Promise.all(promises).then(resolve); });
}

Promise.prototype.syncThen = function (nextFn) {
    if(this.syncable && this.syncable.state == "fulfilled") {
            //
        if(nextFn instanceof Promise) {
            return nextFn;
        }
        else if(typeof nextFn == "function") {
            var val = this.syncable.value;
            var out = nextFn(val);
            return new SyncPromise(function(resolve) { resolve(out); });
        }
        else {
            PINE.err("nextFn is not a function or promise", nextFn);
        }
    }

    else {
        // console.log("default promise");
        return this.then(nextFn);
    }
}

最佳答案

传递给 Promise 构造函数的回调总是同步调用,但传递给 then 的回调总是异步调用(你可以使用 setTimeout 延迟 0 在用户空间实现中实现)。

简化您的示例(并提供匿名函数的名称以便我可以引用它们):

Promise.resolve().then(function callbackA () {
  console.log("finish run 1");
}).then(function callbackB () {
  console.log("surprisingly this happens after run 2 finishes");
});

Promise.resolve().then(function callbackC () {
  console.log("finish run 2");
})

仍然以相同的顺序给出输出:

finish run 1
finish run 2
surprisingly this happens after run 2 finishes

事件按以下顺序发生:

  1. 第一个 promise 已解决(同步)
  2. callbackA 被添加到事件循环的队列中
  3. 第二个 promise 解决了
  4. 将 callbackC 添加到事件循环的队列中
  5. 没有什么可做的,因此事件循环被访问,callbackA 在队列中排在第一位,因此它被执行,它不返回 promise ,因此 callbackB 的中间 promise 立即被同步解析,这将 callbackB 附加到事件循环的队列。
  6. 没有什么可做的,因此事件循环被访问,callbackC 在队列中排在第一位,因此它被执行。
  7. 没有什么可做的,因此事件循环被访问,callbackB 在队列中排在第一位,因此它被执行。

我能想到解决您的问题的最简单方法是使用具有 Promise.prototype.isFulfilled 的库您可以使用该函数来决定是否同步调用您的第二个回调。例如:

var Promise = require( 'bluebird' );                                                                                                                          

Promise.prototype._SEPH_syncThen = function ( callback ) { 
    return (
      this.isPending()
        ? this.then( callback )
        : Promise.resolve( callback( this.value() ) ) 
    );  
}

Promise.resolve()._SEPH_syncThen(function callbackA () {
  console.log("finish run 1");
})._SEPH_syncThen(function callbackB () {
  console.log("surprisingly this happens after run 2 finishes");
});

Promise.resolve()._SEPH_syncThen(function callbackC () {
  console.log("finish run 2");
})

这个输出:

finish run 1
surprisingly this happens after run 2 finishes
finish run 2

关于javascript - 为什么仅调用同步函数时 javascript promises 是异步的?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36726890/

相关文章:

javascript - AddThis 共享按钮在 DotNetNuke 中不起作用

javascript - Vuetify 构建为 Web 组件样式未显示

flutter - Dart/Flutter 中的异步/等待/然后

javascript - 无法在 $.post 回调中设置作用域变量

c# - WriteableBitmap 的异步操作

javascript - 如何捕获服务器响应,即使发生 400 错误请求错误?

node.js - Nodejs - 对一次返回 Promise 的函数进行大量 'X' 次调用

javascript - 获取 vanilla JS 中选择元素的前一个(初始)和所选值

javascript - HTML 表单提交的两种不同操作

reactjs - REACT 未捕获的 TypeError .then 不是一个函数