Konzepte: Verwenden von JavaScript Promises

Einfaches Versprechen

Obwohl es NICHT der Zweck dieses Dokuments ist, Ihnen beizubringen, wie man ein JavaScript schreibt, ist es aufschlussreich zu sehen Promise, wie man es benutzt, um zu verstehen, wie man es benutzt, um zu sehen, wie einfach codiert Promise ist.

Im Folgenden Promise wird eine erstellt, die eine Zeichenfolge zurückgibt, die angibt, ob eine Aufgabe abgeschlossen wurde oder nicht. Der entscheidende Punkt ist, dass entweder die Promise.resolve() oder Promise.reject() Methode aufgerufen wird. In diesem Fall wird eine einfache Zeichenfolge von beiden Methoden übergeben, dies könnte jedoch ein Objekt sein.

          let promiseToFinishTask = new Promise(function(resolve, reject) {
          
            //Business logic to set taskComplete boolean
            let taskComplete = true;
          
            if (taskComplete) {
              resolve('Yea, I am done');
            } else {
              reject('Not quite done');
            }
          });

Jetzt sehen Sie, wie Sie mit den zurückgegebenen Promise Informationen umgehen, was Sie mit einigen Aufrufen der Brightcove Player-API-Methoden machen werden. Die grundlegende Handhabung eines Folgendem:

          promiseName.then(
            // Function call for promise resolved
          ).catch(
            // Function call for promise rejected
          )

Die Handhabung des einfachen Beispiels oben würde wie hier gezeigt aussehen:

          promiseToFinishTask.then(function(fromResolve) {
            console.log(fromResolve);
          }).catch(function(fromReject) {
            console.log(fromReject);
          });

Wenn der aufgelöst Promise ist, wird der then Code ausgeführt, und wenn der abgelehnt Promise wird, wird der catch Code ausgeführt. Für das Beispiel eine der Zeichenfolgen Yea, I am done oder Not quite done würde basierend auf der Geschäftslogik erscheinen, die das festlegt taskComplete Wert der Variablen.

Beispiel für Brightcove

Die play() Methode des Brightcove Players kann ein Promise zurückgeben, mit dem überprüft werden kann, ob der Player das derzeit im Player befindliche Video automatisch abspielen kann. Der Code, der sich mit dem befasst, Promise wird hervorgehoben:

          var myPlayer = videojs.getPlayer('myPlayerID');
          myPlayer.on('loadedmetadata',function() {
            var promise = myPlayer.play();
            if (promise !== undefined) {
              promise.then(function() {
                // Autoplay started!
              }).catch(function(error) {
                // Autoplay was prevented.
              });
            }
          });

Auf dieser Grundlage können Sie dann Verhaltensweisen codieren, wenn das Video automatisch abgespielt wird oder nicht. Informationen zu einem bestimmten Anwendungsfall, der das Video abspielt, wenn möglich mit Audio, finden Sie im Abschnitt Spezifische Anwendungsfall des Dokuments Autoplay considerations .

Vollständige Informationen zu JavaScript-Versprechen finden Sie im Dokument MDN Promise .

Promise versus Rückruf

In diesem Abschnitt wird die get() Methode des Promise Katalogs verwendet, um den Syntaxunterschied zwischen der Verwendung einer und einer Callback-Funktion zu demonstrieren. Die get() Methode kann mit beiden Ansätzen verwendet werden.

Syntax versprechen

Das Folgende ist ein Codeausschnitt, der den Aufruf der get() Methode anzeigt und die Antwort als behandelt Promise:

          myPlayer.catalog.get(catalogParams).then(function(videosReturned){
            console.log('videosReturned',videosReturned);
            myPlayer.playlist(videosReturned);
          }).catch(function(errorObj){
            console.log('errorObj',errorObj);
          })

Syntax der Callback-Funktion

Es folgt ein Codeausschnitt, der den Aufruf der get() Methode anzeigt und die Antwort mit einer Callback-Funktion behandelt:

            myPlayer.catalog.get(catalogParams,function(errorObj,videosReturned){
            console.log('errorObj',errorObj);
            console.log('videosReturned',videosReturned);
            myPlayer.playlist(videosReturned);
          });