為什么已解決的 promise 仍在待處理的 state 中？

Question

例子：

let a = Promise.resolve("123")
        .then(val => {
                console.log(a);
                return 100;
        })
        .then(val => {
                console.log(val);
                console.log(a);
        })
        .finally(() => {
                console.log(a);
        });

Output：

Promise { <pending> }
100
Promise { <pending> }
Promise { <pending> }

為什么已解決的 promise 仍在待處理的 state 中？

Answer 1

因此， a包含執行所有這些的結果：

let a = Promise.resolve(...).then(...).then(...).finally(...);

該階段的每個步驟都會創建一個新的 promise 並且a包含鏈中的最后一個（最后一個 promise 是.finally()返回的那個）。 每次您記錄a時，您都在記錄最終的 promise 並且在鏈完成之前尚未解決。

請記住，所有這些 .then( .then()和.finally()方法都會立即執行，並且每個都返回一個新的 promise。 當它們執行時，它們以一種方式注冊傳遞給它們的回調，以便稍后在它們關聯的 promise 解析或拒絕時調用這些回調。 即使第一個 promise 立即解決，它仍然不執行它的.then()處理程序，直到整個.then().then().finally()鏈執行並且該鏈中的所有 promise 被創建並該鏈中指定的所有處理程序都已注冊。 So, a contains the fourth promise that .finally() returns, not the promise that Promise.resolve() creates and that fourth promise is not resolved until after all the handlers in your chain have finished executing. 由於您正在從所有這些處理程序進行日志記錄，這就是為什么鏈中的最后一個 promise 仍然在您記錄它的任何地方顯示為pending 。

如果你像這樣做不同的事情：

let d = Promise.resolve("123");

d.then(val => {
    console.log(d);
    return 100;
}).then(val => {
    console.log(val);
    console.log(d);
}).finally(() => {
    console.log(d);
});

然后，你會看到這個：

Promise { '123' }
100
Promise { '123' }
Promise { '123' }

因為現在d代表鏈中的第一個 promise，而不是鏈中的最后 promise 所以當所有其他處理程序執行時它確實被解決了。

因此，您可能不知道的操作部分是每個 .then( .then() 、 .catch()或.finally()返回一個新的 promise ，該新 promise 掛在它前面的鏈上。 您原來console.log(a)只監視鏈中的最后一個 promise，而不是鏈中的第一個 promise 或鏈中的當前 promise。