为什么我必须在“finally”之后添加“then”才能链接promise？

Question

根据这个小提琴，如果我尝试从第一个承诺的 .finally() 块调用第二个承诺函数，则第二个承诺会解析，但解析值是“未定义”。 但是，如果我在 .finally 块之后的 .then 块中调用第二个 Promise 函数，则一切都会按预期工作。 为什么我不能在第一个 Promise 的 .finally 块中调用第二个 Promise？

失败的示例（Promise 2 值为“未定义”）：https://jsfiddle.net/scemohkb/

function res(v) { return new Promise((resolve, reject) => { resolve(v); }) }
function rej(v) { return new Promise((resolve, reject) => { reject(v); }) }

rej(1)
.then((val) => {
    console.log(`Value1: ${val}`);
})
.catch((e) => {
    console.error(`Caught 1: ${e}`);
})
.finally(() => {
    console.log("Finally 1");
    return res(2);
})
.then((v) => {
    console.log(`Value2: ${v}`); // THIS DOESN'T WORK: v is undefined
})
.catch((e) => {
    console.log(`Caught 2: ${e}`);
})
.finally(() => {
    console.log("Finally 2");
});

有效的示例：（Promise 2 返回正确的值）：https://jsfiddle.net/scemohkb/1/

function res(v) { return new Promise((resolve, reject) => { resolve(v); }) }
function rej(v) { return new Promise((resolve, reject) => { reject(v); }) }

rej(1)
.then((val) => {
    console.log(`Value1: ${val}`);
})
.catch((e) => {
    console.error(`Caught 1: ${e}`);
})
.finally(() => {
    console.log("Finally 1");
})
.then(() => {
    return res(2);
})
.then((v) => {
    console.log(`Value2: ${v}`); // This works: v is the correct value.
})
.catch((e) => {
    console.log(`Caught 2: ${e}`);
})
.finally(() => {
    console.log("Finally 2");
});

在示例1中，第二个promise函数在调用resolve()时仍然正确返回，并且.then块被执行，但是发送到resolve()的值被忽略，而.then()函数收到“undefined”。

我缺少的 .finally() 函数有什么不同，可以防止这种情况发生？与在 .finally() 之后添加另一个 .then() 函数相比，对于可以独立解决或拒绝的多个 Promise 的最干净的链接似乎是有意义的。

Answer 1

finally()

使用

.then()

和

.catch()

解析的值进行解析。这不起作用的主要原因是

then()

和

catch()

没有解决或拒绝，因此

finally()

也没有解决任何价值。

如果您从

then()

和

catch()

返回一个值，那么它们将被传递到

finally()

，然后

finally()

可以在解析时将该值传递给链中的下一个项目。

function res(v) { return new Promise((resolve, reject) => { resolve(v); }) }
function rej(v) { return new Promise((resolve, reject) => { reject(v); }) }

rej(1)
.then((val) => {
    console.log(`Value1: ${val}`);
})
.catch((e) => {
    console.error(`Caught 1: ${e}`);
    return e;
})
.finally(() => {
    console.log("Finally 1");
    return res(2);
})
.then((v) => {
    console.log(`Value2: ${v}`); // THIS DOESN'T WORK: v is undefined
})
.catch((e) => {
    console.log(`Caught 2: ${e}`);
})
.finally(() => {
    console.log("Finally 2");
});

Answer 2

finally()

函数返回值将被忽略，除非它是一个被拒绝的promise:

除非返回值是被拒绝的 Promise，否则它的返回值将被忽略。

如果您想使用这些函数处理

res(2)

Promise

，您必须在

finally

内进行操作：

function res(v) { return new Promise((resolve, reject) => { resolve(v); }) }
function rej(v) { return new Promise((resolve, reject) => { reject(v); }) }

rej(1)
.then((val) => {
    console.log(`Value1: ${val}`);
})
.catch((e) => {
    console.error(`Caught 1: ${e}`);
})
.finally(() => {
    console.log("Finally 1");
  
  res(2)
    .then((v) => {
            console.log(`Value2: ${v}`);
      })
      .catch((e) => {
        console.log(`Caught 2: ${e}`);
      })
      .finally(() => {
        console.log("Finally 2");
      })
});