Promise.Resolve()何时触发Then()方法?

2022-04-03 00:00:00 javascript es6-promise

我正在学习js中的承诺,我对它有一些问题,代码如下:

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
Promise.resolve().then(() => {
  console.log(0);
  return Promise.resolve(4);
}).then((res) => {
  console.log(res)
})

Promise.resolve().then(() => {
  console.log(1);
}).then(() => {
  console.log(2);
}).then(() => {
  console.log(3);
}).then(() => {
  console.log(5);
}).then(() => {
  console.log(6);
})

输出与我预期的相去甚远,我以为应该是0 1 4 2 3 5 6,因为我在MDN上看到了这个

Promise.Resolve()方法返回用给定值解析的Promise对象

那么,log()方法不应该在数字1后面触发吗?

我做错了什么?


解决方案

承诺不是直接处理的,而是基于队列。如果承诺完成,则在下一个处理周期中处理回调。

如果我们用更详细的代码替换您的代码,我们将得到:

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">
const a = Promise.resolve('a');

const b = a.then(() => {
  console.log('b');
  const c = Promise.resolve('c');
  return c;
});

const ca = b.then((res) => {
  console.log('ca', res)
})

const u = Promise.resolve('u');

const v = u.then(() => {
  console.log('v');
});

const w = v.then(() => {
  console.log('w');
});

const x = w.then(() => {
  console.log('x');
});

const y = x.then(() => {
  console.log('y');
});

const z = y.then(() => {
  console.log('z');
});

第一遍代码是从上到下运行的,没有发生太多事情。两个承诺被放入已解析的队列(au),并且不打印任何内容。当它们在下一个周期中被处理时,它们将同时排队bv

每当处理下一个周期时,b是第一个启动的,记录"b"并将c排队。之后,处理v、日志"v"和队列w

现在,c已完成,并对下一个ca进行排队(由于在Promise中返回承诺,所以是间接的),但不打印任何内容。以此类推。

一直往下看,它应该是这样的:

// Main tick
// - queue a
// - queue u

// Queue tick
// - resolve a, queues b
// - (log nothing)
// - resolve u, queues v
// - (log nothing)

// Queue tick
// - resolve b, queues c
// - log "b"
// - resolve v, queues w
// - log "v"

// Queue tick
// - resolve c, doesnt log, queues the next (ca)
// - resolve w, queues x
// - log "w"

// Queue tick
// - resolve x, queues y
// - log "x"
// - resolve ca, queues nothing
// - log "ca, c"

// Queue tick
// - resolve y, queues z
// - log "y"

// Queue tick
// - resolve z
// - log "z"

我不知道这是否是实际需求,所以如果实现(浏览器)决定直接处理承诺,顺序可能会改变。但我认为这不太可能,因为它不会鼓励公平,而且如果一个承诺永远被锁住,这个承诺将获得分配给它的所有资源。

我认为一般的建议是不要依赖于承诺完成的顺序。仅将a.then(b)视为,b只发生在a完成之后,而不是更早,仅此而已。

如果需要多个承诺相互依赖,请使用Promise.all()Promise.any()

相关文章