javascript - 为什么javascript promise不会在for循环中异步？

Question

我有这样的代码：

const loop1 = length => new Promise((resolve, reject) => {
  try {
    let b = 0
    for (let i = 0; i < length; i++) b = b + i
    resolve(b)
  } catch (e) {
    reject(e)
  }
})

const loop2 = length => new Promise((resolve, reject) => {
  try {
    let b = 0
    for (let i = 0; i < length; i++) b = b + i
    resolve(b)
  } catch (e) {
    reject(e)
  }
})

const startTime = new Date().getTime()

loop1(10000000000).then(result => {
  const endTime = new Date().getTime()
  const duration = endTime - startTime
  console.log(`loop1: ${duration}`, result)
}).catch(error => console.log('loop1 error:', error))

loop2(1).then(result => {
  const endTime = new Date().getTime()
  const duration = endTime - startTime
  console.log(`loop2: ${duration}`, result)
}).catch(error => console.log('loop2 error:', error))

const endTime = new Date().getTime()
const duration = endTime - startTime
console.log('duration', duration)

为什么会出现这样的结果？：

root@ububtu:~$ node .
duration 15539
loop1: 15545 49999999990067860000
loop2: 15545 0

为什么不是这样的结果？：

root@ububtu:~$ node .
duration 0
loop2: 5 0
loop1: 15545 49999999990067860000

为什么要等待 loop1 给出结果？为什么不先通过 loop1 给出结果 loop2 呢？为什么持续时间不是<1秒而是超过15秒？

标签： javascriptasynchronouses6-promise

Answer 1

你传入Promise构造函数的函数（promise executor函数）被同步调用。这样它就可以启动 promise 所代表的异步过程（无论它是什么）。

所以在你的代码中，loop1的 executor 函数同步运行，然后返回 promise，然后loop2的 executor 函数同步运行；稍后，将异步调用履行处理程序。

记住：Promise 不会把同步的东西变成异步的东西。它们只是提供了一种标准化的方法来观察已经异步的事物的结果。

如果您更新代码以对异步操作进行建模（在这种情况下，我将使用setTimeout），您将看到loop2's 之前调用的处理程序loop1，因为它更早地实现了：

const loop1 = length => new Promise((resolve) => {
  setTimeout(resolve, length, length)
})

const loop2 = length => new Promise((resolve) => {
  setTimeout(resolve, length, length)
})

const startTime = new Date().getTime()

loop1(800).then(result => {
  const endTime = new Date().getTime()
  const duration = endTime - startTime
  console.log(`loop1: ${duration}`, result)
}).catch(error => console.log('loop1 error:', error))

loop2(1).then(result => {
  const endTime = new Date().getTime()
  const duration = endTime - startTime
  console.log(`loop2: ${duration}`, result)
}).catch(error => console.log('loop2 error:', error))

const endTime = new Date().getTime()
const duration = endTime - startTime
console.log('duration', duration)