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.2.
Constructor Promise akzeptiert eine Funktion.Jede Promise-Instanz gibt eine neue Promise-Instanz zurück. Zuerst implementieren ein Promise (der Kettenaufruf von then ist nicht implementiert)
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
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'
} )Die Implementierung von then unterscheidet sich vom Kettenaufruf von JQ. JQ gibt nach jedem Methodenaufruf
, Sie müssen also nur die then-Methode ä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 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!
