Eingehende Analyse der Promise-Implementierungsideen (Codebeispiele)

Dieser Artikel bietet Ihnen eine ausführliche Analyse der Promise-Implementierungsideen (Codebeispiele). Ich hoffe, dass er Ihnen als Referenz dienen wird.

Persönliches Verständnis von Promise-Implementierungsideen

Ich hatte immer das Gefühl, dass Promise zwar praktisch ist, die Schreibweise jedoch seltsam ist und ich nicht verstehen kann, wie Menschen, die Promise implementieren denken.

Allerdings habe ich in letzter Zeit ein wenig persönliches Verständnis für den Denkprozess bei der Umsetzung von Promise gewonnen, deshalb werde ich es hier niederschreiben.

Ich habe das Gefühl, dass ich meine Ideen in diesem Artikel immer noch nicht klar dargelegt habe, deshalb werde ich versuchen, diesen Prozess später klarer darzustellen.

Anwendungsfall

   var p1 = new Promise2( ( resolve, reject ) => {
            setTimeout( () => {
                resolve( 'hello' )
            }, 1000 )

        } )

        p1.then( res => {
                console.log( res + 'world' )
                return res + 'world'
            } )
            .then( res => {
                console.log( res + 'ziwei' )
                return res + 'ziwei'
            } )

Ich denke, die Implementierung einer Funktion ähnelt der Kapselung einer Komponente:

• 1 .Wofür wird diese Funktion verwendet?

• 2. Welche Parameter werden akzeptiert?

• 3 > Dann kombinieren Sie die Beispiele und diese Fragen, wir erhalten

1.

Promise wird für die asynchrone Prozesssteuerung verwendet.

Laienhaft ausgedrückt: Ich hoffe, dass eine bestimmte Funktion vorübergehend nicht ausgeführt wird. Wenn ich möchte, dass sie ausgeführt wird, werde ich sie auflösen und Ihre Funktion wird ausgeführt.

• 2.

  Constructor Promise akzeptiert eine Funktion.
Die Parameter der Funktion sind „resolve“ und „reject“. 🎜> 3.
• Gibt eine Promise-Instanz zurück

  Jede Promise-Instanz gibt eine neue Promise-Instanz zurück. Zuerst implementieren ein Promise (der Kettenaufruf von then ist nicht implementiert)

• 1 Promise akzeptiert einen Fn, unabhängig von anderen Dingen, was wird Ihrer Meinung nach dieser Fn intern heißen? Obwohl ich nicht weiß, wie es geht, rufen Sie zuerst fn(resolve,reject)
  2 auf. Dann werden diese Auflösung und Ablehnung nicht von Benutzern implementiert, daher müssen sie von entwickelt werden Versprechen oder umsetzen, dann müssen wir lösen und ablehnen. Wofür müssen sie verwendet werden, um den Status zu ändern? Wird auch die Parameter des Benutzers akzeptieren, dann müssen wir diesen Parameter mit this.value zwischenspeichern. Wenn die then-Methode in Zukunft aufgerufen wird, muss sie in

4.then übergeben werden akzeptiert successFn und errorFn, dies sind die beiden Funktionen, die wir nicht vorübergehend ausführen möchten. Deklarieren Sie einfach zwei Arrays, speichern Sie sie zuerst und rufen Sie in Zukunft

•         class Promise2 {
              constructor( fn ) {
                  this.successFnArray = []  // 用来缓存successFn和errorFn
                  this.errorFnArray = []
                  this.state = 'pendding'
                  const resolve = ( res ) => {      // resolve就做2件事情  1: 修改状态 2:调用successFn
                      this.state = 'fulfilled'
                      this.value = res         // this.value用来缓存data数据或者error
  
                      this.successFnArray.forEach( successFn => {
                          successFn( res )
                      } )
                  }
                  const reject = ( err ) => {
                      this.state = 'rejected'
                      this.value = err
  
                      this.errorFnArray.forEach( errorFn => {
                          errorFn( res )
                      } )
                  }
                  fn( resolve, reject )   // 先调用fn再说
              }
  
              then( successFn, errorFn ) {
                  switch ( this.state ) {
                      case 'fulfilled':
                          successFn( this.value )        // 如果调用了resolve,状态就成了fulfilled，就会执行successFn
                          break
                      case 'rejected':
                          errorFn( this.value )
                          break
                      case 'pendding':
                          this.successFnArray.push( successFn )   // 如果还没调用resolve,状态就是pendding，就先把这些异步函数缓存起来。将来resole时调用
                          this.errorFnArray.push( errorFn )
                  }
              }
          }
  
          var p1 = new Promise2( ( resolve, reject ) => {
              setTimeout( () => {
                  resolve( 'hello' )
              }, 1000 )
  
          } )
  
          p1.then( res => {
              console.log( res + 'world' )
              return res + 'world'
          } )

  Implementieren Sie dann den Kettenaufruf

• Die Implementierung von then unterscheidet sich vom Kettenaufruf von JQ. JQ gibt nach jedem Methodenaufruf

und Promise-Spezifikationsanforderungen ein neues Promise-Objekt zurück muss jedes Mal zurückgegeben werden

• , Sie müssen also nur die then-Methode ändern

Dieser Teil mag verwirrend sein, aber ich möchte zuerst darüber sprechen, was hier getan wird. Tatsächlich gibt es das nicht viel ändern

• Was wurde dann vorher getan?

Es wird successFn oder errorFn je nach Status aufgerufen. Wenn es sich im Status „Ausstehend“ befindet, wird es zwischengespeichert Was ändert sich beim Aufruf von

dann zuerst? und gibt ein Versprechen zurück. Es wird kein Rückgabewert zurückgegeben.

Neues Versprechen. Das Einzige, was zu beachten ist Wenn der Status erfüllt ist, wird successFn

Stattdessen wird _successFn aufgerufen, und diese Funktion ruft im Wesentlichen immer noch successFn() auf, aber gleichzeitig Der Rückgabewert des Aufrufs wird als Parameter von „resolve“ verwendet und „resolve()“

wird aufgerufen, weil beim Aufruf von successFn der Rückgabewert bedeutet, dass die Ausführung der Funktion abgeschlossen ist

muss die nächste asynchrone Funktion ausführen, damit die nächste asynchrone Funktion auch den Rückgabewert von successFn(res) als Parameter verwendet

•        then( successFn, errorFn ) {
                  
                  return new Promise2( ( resolve, reject ) => {
                      const _successFn = res => {
                          resolve(successFn(res))
                      }
                      const _errorFn = err => {
                          reject(errorFn(err))
                      }
                      
                      switch ( this.state ) {
                          case 'fulfilled':
                          _successFn( this.value )
                              break
                          case 'rejected':
                          _errorFn( this.value )
                              break
                          case 'pendding':
                              this.successFnArray.push( _successFn )
                              this.errorFnArray.push( _errorFn )
                      }
                  } )
  
              }

Das obige ist der detaillierte Inhalt vonEingehende Analyse der Promise-Implementierungsideen (Codebeispiele). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!