javascript - 直接将函数与匿名函数传递给 then Promise 回调

Question

我试图了解这 3 个选项之间的区别:

.then(myCallback)

.then(myCallback())

.then(() => { myCallback() })

myCallback 函数不返回任何内容，仅用于其副作用，因此我不需要它将任何内容传递回 promise 链。我不明白的是，为什么在我的代码中只有第二个选项触发该函数，而这三个选项似乎都应该触发该函数。

更新:这是包含基本要素的代码

serverCall(url, data) // fetch function
  .then((response) => response.json())
  .then(myCallback) // not running, only when () added
  .catch((error) => { console.log(error) })

const myCallback = () => { 
  anotherServerCall(...).then(...)
}

更新2

经过一番挖掘，我发现将 .then((response) => response.json()) 作为第一个 then 响应 是阻止 .then(myCallback) 执行。还是不知道为什么...

Answer 1

这三种方法都应该触发该函数，但不同方法的顺序不同。如果您有时看到 serverCall 或 myCallback 没有被调用的证据，那么这与这些函数的细节有关，而不是与您的方式有关给他们打电话。

为了进行演示，请考虑使用 serverCall 和 myCallback 的两个代理，我们知道它们始终有效。让我们将您问题中的每个想法应用到这些:

1. 这是使用 then 的“正常”方式。向其传递一个函数，该函数在其所附加的 Promise 之后调用......

function serverCall() {
    console.log('began server call');
    return new Promise(function(resolve) {
        setTimeout(() => {
            console.log('completed server call');
            resolve();
        }, 2);
    });
}

function myCallback() {
    console.log('callback called');
}

serverCall().then(myCallback).then(() => console.log('done'));

// produces: 
// began server call
// completed server call
// callback called
// done

你的第一个和第三个想法几乎相同。然后传递一个在 Promise 之后调用的函数。在你的第三个想法中，函数不是回调，而是调用回调的函数。又一个堆栈帧，但效果完全相同......

function serverCall() {
    console.log('began server call');
    return new Promise(function(resolve) {
        setTimeout(() => {
            console.log('completed server call');
            resolve();
        }, 2);
    });
}
    
function myCallback() {
    console.log('callback called');
}


serverCall().then(() => { myCallback() }).then(() => console.log('done'))

// produces:
// began server call
// completed server call
// callback called
// done

正如评论者指出的那样，您的第二个想法是调用该函数并将其结果传递给 then。 then 的链接在启动 Promise 后同步运行，因此结果会重新排序:myCallback 在 Promise 完成之前运行...

function serverCall() {
    console.log('began server call');
    return new Promise(function(resolve) {
        setTimeout(() => {
            console.log('completed server call');
            resolve();
        }, 2);
    });
}
    
function myCallback() {
    console.log('callback called');
}


serverCall().then(myCallback()).then(() => console.log('done'))

// produces:
// began server call
// callback called         <------ CHANGED!!!
// completed server call
// done