Question

我试图了解这三个选项之间的区别：

.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 response是阻止.then(myCallback)执行的原因。还是不知道为什么...

Answer 1

这三个函数均应触发该函数，但是方法之间的顺序不同。如果您有时会发现没有调用serverCall或myCallback的证据，那么这与这些函数的细节有关，而不是您调用它们的方式。

为证明这一点，请考虑两个serverCall和myCallback的代理，我们知道它们将始终有效。让我们将问题中的每个想法应用于这些想法：

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

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的链接在开始诺言后同步运行，因此结果似乎重新排序：myCallback在诺言完成之前运行...

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

Answer 2

我发现重复问题的唯一方法是回调函数是否返回了函数。选项1和3不会执行任何操作，因为未调用返回的函数。选项2 被调用并成功。

function fetch() {
  return new Promise((resolve, reject) => {
    resolve();
  });
}

function myCallBack() {
  return function () {
    console.log('Success');
  };
}

fetch().then(myCallBack); // nothing
fetch().then(myCallBack()); // Success
fetch().then(() => myCallBack()); // nothing

Answer 3

您的用例有所不同，因为

第一个then调用是您传递一个callback并在执行时被调用，如果发生某些错误，传递的命名函数将出现在堆栈跟踪中

第二个，执行传递给callback函数之前传递的then，执行回调的结果将传递给then函数，因此，想象一下。 / p>

function myCallback(){
        return function   theRealCallbackPassed(thenResponse){
          // do something with then response
        }
    }

最后一个将定义一个匿名箭头函数，那么

之间的区别是什么？

then( () => {} )

还有

then( function(){} )

不同之处在于，使用箭头函数() => {}的语法很短，并且将函数contexto绑定到了声明箭头函数的当前上下文。

function() {}语法并不短，并且不能自动绑定。

希望它可以为您提供帮助。

将函数直接传递给匿名函数，然后传递给答应回调

3 个答案: