Передача функции непосредственно против анонимной функции в обратный вызов затем обещания

Question

Я пытаюсь понять разницу между 3 вариантами:

.then(myCallback)

.then(myCallback())

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

Функция myCallback ничего не возвращает и используется только для ее побочных эффектов, поэтому мне не нужно ничего передаватьвернуться к цепочке обещаний.Чего я не понимаю, так это того, почему в моем коде только второй вариант запускает функцию, когда кажется, что все 3 должны.

ОБНОВЛЕНИЕ 2

После некоторого копания я вижу, что наличие .then((response) => response.json()) в качестве первого then response - это то, что мешает выполнению .then(myCallback).До сих пор не знаю, почему ...

Answer 1

Ваши варианты использования отличаются, потому что

При первом вызове then вы передаете callback, который будет вызван, когда он будет выполнен, и передача функции именования появится в трассировке стека, если произошла какая-либо ошибка

Второй, выполнить callback, переданный перед передачей в функцию then, и результат этого обратного вызова будет передан в функцию then, так что представьте себе это.

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

Последний, определит анонимную функцию стрелки, так что разница между

then( () => {} )

И

then( function(){} )

Разница заключается в том, что при использовании функции стрелки () => {} у вас короткий синтаксис, и вы привязываете функцию context к текущему контексту, в котором объявлена ​​функция стрелки.

Хотя синтаксис function() {} не короче и не может быть автоматически привязан.

Надеюсь, это поможет вам.

Answer 2

Все три должны вызывать функцию, но порядок отличается между подходами. Если вы иногда видите доказательства того, что serverCall или myCallback не вызывается, то это имеет отношение к особенностям этих функций, а не к способам их вызова.

Чтобы продемонстрировать, рассмотрим два прокси для serverCall и myCallback, которые, как мы знаем, будут работать всегда. Давайте применим каждую идею в вашем вопросе к:

1. Это «нормальный» способ использования 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

2. Ваши первая и третья идеи почти совпадают. Затем передайте функцию, которая вызывается после обещания. В вашей третьей идее, функция - это не обратный вызов, это функция, которая вызывает обратный вызов. Еще один кадр стека, но тот же эффект ...

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

3. Ваша вторая идея, как указывает комментатор, вызывает функцию и передает ее результат 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 3

Единственный способ, который я нашел, чтобы продублировать вашу проблему, - это если обратный вызов возвращает функцию. Опции 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