Analyse approfondie des idées de mise en œuvre de Promise (exemples de code)

Ce que cet article vous apporte est une analyse approfondie des idées de mise en œuvre de Promise (exemples de code). Il a une certaine valeur de référence. Les amis dans le besoin peuvent s'y référer.

Compréhension personnelle des idées de mise en œuvre de Promise

J'ai toujours pensé que même si Promise est pratique, son écriture est bizarre et je n'arrive pas à comprendre comment les gens qui mettent en œuvre Promise pense.

Cependant, j'ai récemment acquis une petite compréhension personnelle du processus de réflexion lié à la mise en œuvre de Promise, je vais donc l'écrire ici.

J'ai l'impression de ne pas avoir encore expliqué clairement mes idées dans cet article. Le temps presse, je vais donc simplement le traiter comme un disque et j'essaierai d'exprimer ce processus plus clairement plus tard.

Cas d'utilisation

   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'
            } )

Je pense qu'implémenter une fonction est similaire à l'encapsulation d'un composant :

• 1.A quoi sert cette fonction ?

• 2. Quels paramètres sont acceptés

• 3 Quelle est la valeur de retour

Donc. combinez les exemples et ces questions, nous obtenons

• 1.La promesse est utilisée pour le contrôle de processus asynchrone. En termes simples, j'espère qu'une certaine fonction ne sera pas exécutée temporairement. Lorsque je veux qu'elle soit exécutée, je la résoudrai et votre fonction sera exécutée.

• 2.Constructor Promise accepte une fonction. Les paramètres de la fonction sont résoudre et rejeter. Resolve et rejet sont également des fonctions appelées par l'utilisateur. Lorsque l'utilisateur souhaite la prochaine exécution asynchrone, appelez solve(0

• <.> 3.

  Renvoie une instance de promesse. Chaque instance de promesse a une méthode then, et la méthode then renvoie également une nouvelle instance de promesse à partir de celle-ci, vous pouvez appeler then dans une chaîne Première implémentation. une promesse (l'appel en chaîne de then n'est pas implémenté)

1 La promesse accepte un fn, indépendamment d'autres choses, que pensez-vous que ce fn fera en interne, alors ? bien que je ne sache pas comment faire, appelez d'abord fn(resolve,reject)

• 2 Ensuite, cette résolution et ce rejet ne sont pas implémentés par les utilisateurs, ils doivent donc être développés par. Promettre ou mettre en œuvre, alors nous devons mettre en œuvre la résolution et le rejet. À quoi servent-ils ? Ils doivent être utilisés pour changer l'état, alors définissez this.state

• 3.résoudre et rejeter. acceptera également les paramètres de l'utilisateur, nous devons alors mettre en cache ce paramètre avec this.value Lorsque la méthode then est appelée à l'avenir, elle doit être transmise dans

• 4.then. accepte successFn et errorFn, this Les deux sont des fonctions que nous ne voulons pas exécuter temporairement. Comment faire ? Il suffit de déclarer deux tableaux, de les enregistrer d'abord et d'appeler

• à l'avenir.

Implémente then chain call

        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'
        } )

L'implémentation de then est différente de l'appel en chaîne de JQ. JQ renvoie ceci à après chaque appel de méthode. un nouvel objet Promise

sera renvoyé à chaque fois, il vous suffit donc de modifier la méthode then

Cette partie peut prêter à confusion, mais je veux d'abord parler de ce qui est fait ici. , en fait, n'ont pas beaucoup changé

Qu'a-t-on alors fait avant

C'est appeler successFn ou errorFn selon différents états S'il est en attente. state, il est appelé en premier. Mettez-le en cache et appelez-le lors de la résolution future

• Quels sont les changements à enchaîner alors ? Tout d'abord, a ensuite une valeur de retour et renvoie une promesse. Il n'y avait pas de valeur de retour auparavant. Ce qui a été renvoyé n'était pas défini

nouveau processus de promesse. . La seule chose à noter est que lorsque le statut est rempli, successFn

• Au lieu de cela, il appelle _successFn, ​​​​et cette fonction appelle essentiellement successFn(), mais en même temps, la valeur de retour de l'appel est utilisée comme paramètre de résolution, et solve() est appelée
  Parce que lorsque successFn est appelé et que la valeur de retour est obtenue, cela signifie que la fonction a été exécuté.
• doit exécuter la prochaine fonction asynchrone, de sorte que la prochaine fonction asynchrone utilise également la valeur de retour de successFn(res) comme paramètre

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!