Wie genau funktioniert dieses Versprechen Beispiel?

Question

Ich studiere Angular 2 und ich habe einen Zweifel mit diesem Code, den ich in einem Tutorial gefunden:

appStatus = new Promise((resolve, reject) => { 
    setTimeout(() => { 
     resolve('stable'); 
    }, 2000); 
    }); 

ich verstand, dass dieser Befehl etwas wie dies tut: der Wert der appStatus Variable auf den String 'stabil', nachdem 2 Sekunden vergangen sind. Ist es das?

Aber was genau ist ein Versprechen? Also die AppStatus Variable enthält eine Promise Objektreferenz, die ich denke, wird den "stabilen" aufgelösten Wert enthalten, nachdem 2 Sekunden vergangen sind. Aber was genau ist und was enthält?

Was ist der allgemeine Anwendungsfall Promise?

Answer 1

appStatus Wert wird nicht die Zeichenfolge ‚stabil‘, wie Sie denken. AppStatus-Wert ist hier ein Versprechen-Objekt, das Ihnen die Zeichenfolge 'stable' verspricht (Sie erhalten es nach 2 Sekunden). Um den Wert zu erhalten ‚stabil‘ aus dem Versprechen (Sie werden es bekommen, wenn die 2 Sekunden Dauer endet), müssen Sie tun:

appStatus.then((result) => { console.log(result); }); 

Answer 2

Versprechen werden in vielen Facetten von JS verwendet, eckig ist ein kleines Beispiel. Lange Rede kurzer Sinn, Promises sind .then fähige Objekte. Wenn Sie zum Beispiel mit xhr (XMLHttpRequest) gearbeitet haben, können Sie sich die .then(x) ähnlich wie die xhr.onload = x vorstellen, aber dieses Konstrukt ermöglicht viel leistungsfähigeren Code. Diese beiden Teile des Codes Akt in sehr viel die gleiche Weise:

// callback "format" 
const xhr = new XMLHttpRequest; 
xhr.open('GET', '/api/some-query'); 
xhr.onload =() => { console.log(xhr.response); }; 
xhr.send(); 

// promise "format" 
const xhrPromise = new Promise((resolve, reject) => { 
    const xhr = new XMLHttpRequest; 
    xhr.open('GET', '/api/some-query'); 
    // bad error handling, but proves the point 
    xhr.onload =() => { resolve(xhr.response); }; 
    xhr.send(); 
}); 
xhrPromise.then((text) => { console.log(text); }); 

Was haben Sie da oben ist das Versprechen Muster. Um es einfacher zu verstehen, ist hier ein ähnliches Stück die Callback-Muster mit:

setTimeout(() => { f('stable') }, 2000); 

dies vorausgesetzt, Sie dies mit Ihrem aktuellen Code anhängen:

appStatus.then((status) => { f(status) }); 

Wie dies viel besser sein kann, kann nicht sein zunächst klar, aber wenn man in sie eintauchen und entdecken, dass Versprechungen verkettbar sind (appStatus.then(...).then(...)), wie die Fehlerbehandlung mit .catch und ähnliche funktioniert, ist es leicht, mit ihnen, sich zu verlieben

es gibt viele gut liest unter stehen, wie Versprechungen arbeiten, wie the MDN docs und this post by Jake Archibald