Versprechen Verkettung gleiche Funktion

Question

Ich möchte eine gefälschte Diskussion in JS mit Versprechungen erstellen.

console.log Warte X Sekunden,
console.log Warte X Sekunden ...

ist hier mein Code:

var addMessage = function (msg) { 
    return new Promise(function (resolve, reject) { 
    setTimeout(function() { 
     console.log(msg) 
     resolve() 
    }, 2500) 
    }) 
} 

var scenario = function() { 
    addMessage('Hello who are you ?') 
    .then(addMessage('Hello I am John')) 
    .then(addMessage('Nice too meet you')) 
    .then(addMessage('Me too')) 
    .then(addMessage('Good Bye')) 
    .then(addMessage('Bye')) 
} 

scenario() 

Aber mit diesem Code alle console.log() auf der gleichen gemacht Zeit (nach 2500ms), ich bin neu mit Versprechungen und ich beherrsche sie wirklich nicht.

Vielen Dank!

Answer 1

Thomas hat es ziemlich gut in seinem Kommentar zusammengefasst:

dann() erwartet eine Funktion, aber addMessage() gibt ein Versprechen. A Versprechen ist keine Funktion. Und alle Ihre Versprechen am gleichzeitig erstellt werden, das ist, warum sie zur gleichen Zeit feuern

Sie bauen alle neuen Versprechungen zugleich so werden sie sofort ausführen und die Zeitgeber wird dann auch gleichzeitig Ende gleichzeitig. Um dies zu verringern, können Sie addMessage in eine Funktion innerhalb der .then Anrufe umbrechen.

addMessage('Hello who are you ?') 
    .then(function() { addMessage('Hello I am John') }) 
    .then(function() { addMessage('Nice too meet you') }) 
    .then(function() { addMessage('Me too') }) 
    .then(function() { addMessage('Good Bye') }) 
    .then(function() { addMessage('Bye') }) 

Alternativ können Sie auch Function.prototype.bind() verwenden, um zu vermeiden eine anonyme Funktion jedes Mal zu schreiben.

addMessage('Hello who are you ?') 
    .then(addMessage.bind(null, 'Hello I am John')) 
    .then(addMessage.bind(null, 'Nice too meet you')) 
    .then(addMessage.bind(null, 'Me too')) 
    .then(addMessage.bind(null, 'Good Bye')) 
    .then(addMessage.bind(null, 'Bye')) 

Und natürlich, wenn Ihre Umgebung eine aktuelle Version von JavaScript ausgeführt wird Sie auch arrow functions verwenden:

addMessage('Hello who are you ?') 
    .then(() => addMessage('Hello I am John')) 
    .then(() => addMessage('Nice too meet you')) 
    .then(() => addMessage('Me too')) 
    .then(() => addMessage('Good Bye')) 
    .then(() => addMessage('Bye')) 

In naher Zukunft werden Sie auch die await keyword nutzen können, die die Notwendigkeit beseitigt vollständig für alle .then Anrufe:

await addMessage('Hello who are you ?') 
await addMessage('Hello I am John') 
await addMessage('Nice too meet you') 
await addMessage('Me too') 
await addMessage('Good Bye') 
await addMessage('Bye')