在 for 循环中使用 Promise，所有 .then 总是被调用，直到所有第一个 .then 完成运行，这是为什么呢？

Question

我是 JavaScript 的新手，对 Promise 的概念一无所知。我正在做测试。

我创建了一个 promise 和两个 for 循环，总共运行了 6 次 Promise，我知道它们何时被 console.log()

执行

这是我的代码

console.log("testing promise")

let p = new Promise((resolve, reject)=> { //promise take a function as parameter.

    console.log("defining variable a ")
    let a = 2   
    if(a==2){
        console.log("inthe a ==2 block")
        resolve("success")
    }
    else if (a==3){
        reject("fail")
    }
    else if(a==5){
        reject("fail when a =5")
    }
    

})

console.log("before going into for loop")
for(let i=0; i<3; i++){

    p.then((message)=>{
        console.log("the message is "+message);
        return("second message")
    }).then((ak)=>{
        console.log("the message is "+ak);
        return false
    }).catch((message)=>{
        console.log("the message is "+message)
    })
    .finally(()=>{
        console.log("finially block")
    })
}

for(let i=0; i<3; i++){

    p.then((message)=>{
        console.log("the message is "+message);
        return("second message")
    }).then((ak)=>{
        console.log("the message is "+ak);
        return false
    }).catch((message)=>{
        console.log("the message is "+message)
    })
    .finally(()=>{
        console.log("finially block")
    })
}

控制台是这样的：

testing promise
script.js:5 defining variable a 
script.js:8 inthe a ==2 block
script.js:21 before going into for loop
3 script.js:25 the message is success
3 script.js:41 the message is success
3 script.js:28 the message is second message
3 script.js:44 the message is second message
3 script.js:34 finially block
3 script.js:50 finially block

为什么第二个.then和所有的.finally都会等待每一个first.then然后被执行？

我知道我可能在我大脑中存储的知识库中遗漏了 Javascript 中的一些基本概念 :)，请让我知道 JS 中关于这个问题的概念是什么，我会看一下，谢谢！

Answer 1

如果您注意到，在您的示例中，您 referenced/assigned 对变量 (let p = new Promise((resolve, reject)=> {....) 的承诺，然后您使用了变量 p，该变量现在具有对相同 promise 实例，在你的 for 循环中。

请记住，承诺的引用一旦实现，将始终return相同的结果。例如：

const aPromise = new Promise(resolve => resolve(Math.random());

// loop simulation
for (let x = 0; x < 5; x++) {
    // this will print the same generated random number 5 times.
    aPromise.then(result => console.log(result));
}

这可能就是您在 console.log() 中看到的原因。基本上，这两个 for 循环异步执行相同的 promise 引用，其中每个处理程序序列（.then 和 .finally）同时（或几乎）完成。

为了正确展示您想要实现的目标，您需要在每次迭代时执行一个新的 Promise 实例。另一个例子：


// use a function here instead to trigger a new instance of a promise.
let aPromise = (loopReference) => new Promise(resolve => {
  // generates a 2 digit random number.
  const randomTimeout = (Math.floor(Math.random() * 90 + 10));
  
  const returnValue = `${loopReference} ${randomTimeout}`;
  console.log(`generated value is: ${returnValue}`);
  
  // simulate a process by using a timeout based on the generated random value.
  setTimeout(() => {
    resolve(returnValue);
  }, randomTimeout);
});


// first loop
for (let x = 0; x < 5; x++) {
  aPromise('first loop').then(val => {
    console.log('first then for: ' + val);
    return val;
  }).then(val => {
    console.log('second then for: ' + val);
    return val;
  });
}

// second loop
for (let x = 0; x < 5; x++) {
  aPromise('second loop').then(val => {
    console.log('first then for: ' + val);
    return val;
  }).then(val => {
    console.log('second then for: ' + val);
    return val;
  });
}

然后您应该会看到此日志，内容如下：

generated value is: first loop 46
generated value is: first loop 99
generated value is: first loop 75
generated value is: first loop 56
generated value is: first loop 43
generated value is: second loop 60
generated value is: second loop 50
generated value is: second loop 58
generated value is: second loop 68
generated value is: second loop 35

first then for: second loop 35
second then for: second loop 35
first then for: first loop 43
second then for: first loop 43
first then for: first loop 46
second then for: first loop 46
first then for: second loop 50
second then for: second loop 50
first then for: first loop 56
second then for: first loop 56
first then for: second loop 58
second then for: second loop 58
first then for: second loop 60
second then for: second loop 60
first then for: second loop 68
second then for: second loop 68
first then for: first loop 75
second then for: first loop 75
first then for: first loop 99
second then for: first loop 99

让我知道这是否为您解决了问题。祝你好运！

在 for 循环中使用 Promise，所有 .then 总是被调用，直到所有第一个 .then 完成运行，这是为什么呢？

Using Promise in a for loop, all the .then came later is always be called untill all the first .then is finished running, why is that?

javascript

callback

promise

async-await

在 for 循环中使用 Promise，所有 .then 总是被调用，直到所有第一个 .then 完成 运行，这是为什么呢？

Using Promise in a for loop, all the .then came later is always be called untill all the first .then is finished running, why is that?

javascript

callback

promise

async-await

在 for 循环中使用 Promise，所有 .then 总是被调用，直到所有第一个 .then 完成运行，这是为什么呢？