Nouvelles fonctionnalités d'ES6 : introduction détaillée du code à la promesse d'objet différé intégrée en JavaScript-js tutoriel-php.cn

Table des matières

Utilisation de base de Promise :

la fonction asynchrone précédente

Maison

interface Web

js tutoriel

Nouvelles fonctionnalités d'ES6 : introduction détaillée du code à la promesse d'objet différé intégrée en JavaScript

黄舟

Mar 07, 2017 pm 02:26 PM

Utilisation de base de Promise :

L'utilisation de Promise consiste à résoudre le problème de la fonction de rappel imbriquée lors de l'exécution asynchrone de JS. Contrôlez de manière plus précise le processus d'exécution de la fonction ;

instancie Promise via new. Le premier paramètre est la résolution de la fonction qui sera exécutée une fois la fonction exécutée avec succès. deuxième fonction Rejetez la fonction qui sera exécutée après l'échec de l'exécution de la fonction :

new Promise(function(resolve , reject) {
});

Copier après la connexion

Grâce à Promesse, nous écrivons la fonction de rappel de manière linéaire au lieu de couche par couche. a quatre couches de rappels ;

fn("args", function(a) {
    fn1("foo", function(b) {
        fn2("bar", function(c) {
            fn3("baz", function(d) {
                alert("回调成功，获知的内容为："+a+b+c+d)
            })
        })
    })
})

Copier après la connexion

La démo ci-dessus n'inclut que les rappels réussis. Ce serait plus gênant si les rappels échoués étaient également comptés

Si nous utilisons Promise, nous pouvons être modifiés en ; code linéaire, il est plus conforme aux habitudes de lecture, écrivez simplement la logique sous la fonction then

new Promise(function(resolve , reject) {
    resolve(1);
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(2);
    });
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(3);
    });
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(4);
    });
}).then(function(val) {
    console.log(val);
});

Copier après la connexion

Ceci est un exemple de obtention de données asynchrone, nous avons utilisé Fonction de rappel;

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<script>
    var callback = function(res) {
        console.log(res);
    };
    var ajax = function(url, callback) {
        var r = new XMLHttpRequest();
        r.open("GET", url, true);
        r.onreadystatechange = function () {
            if (r.readyState != 4 || r.status != 200) return;
            var data = JSON.parse(r.responseText);
            callback(data);
        };
        r.send();
    };
    //执行请求：
    ajax("http://www.filltext.com?rows=10&f={firstName}", callback);
    //再做别的事情；
</script>
</body>
</html>

Copier après la connexion

Étant donné que ES6 a une promesse intégrée, nous pouvons réécrire le rappel ci-dessus dans une méthode de promesse. Premièrement, la fonction ajax renvoie un objet Promise

<🎜. >

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
    <script>
        var callback = function(res) {
            console.log(res);
        };
        var ajax = function(url) {
            return new Promise(function(resolve, reject) {
                var r = new XMLHttpRequest();
                r.open("GET", url, true);
                r.onreadystatechange = function () {
                    if (r.readyState != 4 || r.status != 200) return;
                    var data = JSON.parse(r.responseText);
                    resolve(data);
                };
                r.send();
            })
        };
        //执行请求：
        ajax("http://www.filltext.com?rows=10&f={firstName}").then(function(data) {
            callback(data);
        });
        //再做别的事情；
    </script>
</body>
</html>

Copier après la connexion

Trois états des instances Promise :

Chaque promesse instanciée a trois états : en attente (en attente), rejeté (rejeté) résolu (résolu). Si la résolution est exécutée (), alors. le statut de cette promesse sera résolu. Si rejeter() est exécuté, alors le statut de cette promesse sera rejeté, et ces statuts sont irrévocables, ils ne changeront plus

puis méthode :

promise a une méthode then. La méthode then reçoit deux paramètres, le premier est le rappel de réussite de la fonction, et le second est le rappel d'échec de la fonction :

var promise = new Promise(function(resolve , reject) {
    resolve(); //执行成功回调;
});
console.log(0);
promise.then(function(val) {
    console.log(1); 
}, function() {
    console.log("失败");
});
console.log("2");

Copier après la connexion

var promise = new Promise(function(resolve , reject) {
    reject();
});
console.log(0);
promise.then(function(val) {
    console.log(1);
}, function() {
    console.log("失败");
});
console.log("2");

Copier après la connexion

La méthode then renvoie une instance Promise différente à chaque fois. Le premier paramètre de then est un rappel réussi. Les paramètres de ce rappel réussi sont : Les paramètres de la méthode de résolution exécutée par l'instance Promise précédente ; De manière générale, la méthode then renverra la

promise

actuelle. Si une nouvelle instance de Promise est renvoyée dans la méthode then, then renverra la nouvelle instance de Promise. En utilisant cette fonctionnalité, vous pouvez implémenter

Multi. -layer callbacks; Que le code soit asynchrone ou synchrone, vous pouvez utiliser la méthode then de Promise. Le code synchrone est écrit directement dans le premier paramètre de la méthode then. Les paramètres doivent être transmis à la méthode then suivante via la résolution

new Promise(function(resolve , reject) {
    resolve(1);
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(2);
    });
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(3);
    });
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve , reject) {
        resolve(4);
    });
}).then(function(val) {
    console.log(val);
});

Copier après la connexion

S'il s'agit de code asynchrone, renvoyez directement une instance Promise :

méthode catch :

new Promise(function(resolve , reject) {
    resolve(1);
}).then(function(val) {
    console.log(val);
    return 2;
}).then(function(val) {
    console.log(val);
    return 3;
}).then(function(val) {
    console.log(val);
    return new Promise(function(resolve,reject) {
        //异步操作些这里
        resolve(4);
    });
}).then(function(val) {
    console.log(val);
    return 5;
}).then(function(val) {
    console.log(val);
});

Copier après la connexion

méthode catch Identique au rappel d'échec, si

la fonction asynchrone précédente

renvoie une erreur, l'erreur sera capturée et la méthode catch ou le rappel d'échec sera exécuté

Erreur dans la promesse Elle sera transmise couche par couche. Si l'erreur n'est pas détectée, elle sera transmise à l'objet de promesse suivant,

jusqu'à ce qu'elle soit détectée

var promise = new Promise(function(resolve , reject) {
    resolve(); //执行成功回调;
});
console.log(0);
promise.then(function(val) {
    console.log("成功");
    throw new Error("heheda");
}).catch(function(e) {
    console.log(e);
}).then(function() {
    console.log("继续执行");
});

Copier après la connexion

, puis continuera à s'exécuter :

<🎜. > Les quatre méthodes du constructeur Promise :

Le constructeur Promise a quatre méthodes, Promise.all, Promise.race, Promise.reject, Promise.resolve :

new Promise(function(resolve , reject) {
    resolve(1);
}).then(function(val) {
        console.log(val);
        return new Promise(function(resolve , reject) {
            throw new Error("err");
        });
    }).then(function(val) {
        console.log(val);
        return new Promise(function(resolve , reject) {
            resolve(3);
        });
    }).then(function(val) {
        console.log(val);
        return new Promise(function(resolve , reject) {
            resolve(4);
        });
    }).then(function(val) {
        console.log(val);
    }).catch(function(err) {
        console.log(err);
    }).then(function() {
        console.log("继续执行")
    })

Copier après la connexion

Promise.all (iterable)

Renvoie un objet de promesse Lorsque toutes les promesses dans les paramètres itérables sont résolues, la promesse sera également résolue

Notez que la méthode all est la . Fonction Promise
méthode, pas une méthode d'instance, le paramètre est un tableau et le tableau est constitué de toutes les instances de

Promise

: Promise.race(iterable )

var p0 = new Promise(function(resolve) {
    setTimeout(function() {
        resolve(0)
    },1000);
})
var p1 = new Promise(function(resolve) {
    setTimeout(function() {
        resolve(1)
    },2000);
})
var p2 = new Promise(function(resolve) {
    setTimeout(function() {
        resolve(2)
    },3000);
})
Promise.all([p0,p1,p2]).then(function(arr) {
    console.log(arr)
})

Copier après la connexion

Lorsqu'une promesse enfant dans le paramètre itérable réussit ou échoue, la promesse parent utilisera immédiatement la valeur de retour de succès ou les détails d'échec de la promesse enfant comme paramètre pour appeler le handle correspondant lié par le promesse parent et renvoie l'objet de promesse.

Promise.reject(reason)

Appelez le handle rejeté de Promise et renvoyez cet objet Promise.

Promise.resolve(value)

Résolvez un objet Promise avec la valeur de réussite. Si la valeur est alors exploitable (c'est-à-dire avec une méthode then), l'objet Promise renvoyé « suivra » la valeur et adoptera l'état final de la valeur ; sinon, la valeur de retour utilisera cette valeur pour satisfaire (accomplir) la valeur renvoyée ; Objet de promesse.

Exemple officiel :

Maintenant que nous avons Promise, nous pouvons encapsuler le XMLHttpRequest dans une méthode GET pour une utilisation facile :

<html>
<head>
    <meta charset="utf-8">
</head>
<body>
<p id="log"></p>
<script>
    &#39;use strict&#39;;
    var promiseCount = 0;
    function testPromise() {
        var thisPromiseCount = ++promiseCount;

        var log = document.getElementById(&#39;log&#39;);
        log.insertAdjacentHTML(&#39;beforeend&#39;, thisPromiseCount + &#39;) 开始(同步代码开始)<br/>&#39;);

        // 我们创建一个新的promise: 然后用&#39;result&#39;字符串解决这个promise (3秒后)
        var p1 = new Promise(function (resolve, reject) {
            // 解决函数带着解决（resolve）或拒绝（reject）promise的能力被执行
            log.insertAdjacentHTML(&#39;beforeend&#39;, thisPromiseCount + &#39;) Promise开始(异步代码开始)<br/>&#39;);

            // 这只是个创建异步解决的示例
            window.setTimeout(function () {
                // 我们满足（fullfil）了这个promise!
                resolve(thisPromiseCount)
            }, Math.random() * 2000 + 1000);
        });

        // 定义当promise被满足时应做什么
        p1.then(function (val) {
            // 输出一段信息和一个值
            log.insertAdjacentHTML(&#39;beforeend&#39;, val + &#39;) Promise被满足了(异步代码结束)<br/>&#39;);
        });

        log.insertAdjacentHTML(&#39;beforeend&#39;, thisPromiseCount + &#39;) 建立了Promise(同步代码结束)<br/><br/>&#39;);
    }
    testPromise();
</script>
</body>
</html>

Copier après la connexion

Ensuite, utilisez :

function get(url) {
  // Return a new promise.
  return new Promise(function(resolve, reject) {
    // Do the usual XHR stuff
    var req = new XMLHttpRequest();
    req.open(&#39;GET&#39;, url);

    req.onload = function() {
      // This is called even on 404 etc
      // so check the status
      if (req.status == 200) {
        // Resolve the promise with the response text
        resolve(req.response);
      }
      else {
        // Otherwise reject with the status text
        // which will hopefully be a meaningful error
        reject(Error(req.statusText));
      }
    };

    // Handle network errors
    req.onerror = function() {
      reject(Error("Network Error"));
    };

    // Make the request
    req.send();
  });
}

Copier après la connexion

L'adresse des fausses données peut être définie par vous-même et elle peut être demandée via la console. Faites attention aux problèmes inter-domaines ; 🎜> encapsuler XMLHttpRequest dans Promise pour un chargement asynchrone Exemple d'image : http://www.php.cn/

get(&#39;story.json&#39;).then(function(response) {
  console.log("Success!", response);
}, function(error) {
  console.error("Failed!", error);
});

Copier après la connexion

Autres :

Ce qui précède ne sont que quelques-uns connaissance de base de Promise, et il y en a quelques autres. Les points de connaissance ne sont pas introduits un par un en raison de capacités limitées (différents paramètres de Promise.resolve, utilisés avec Generator, méthodes supplémentaires de Promise, etc.) ; Dessinez le processus en cours de Promise, à droite La compréhension de Promise sera meilleure, Promise est encore un peu déroutante

Support du navigateur :

Chrome 32, Opera 1, Firefox 29, Safari 8, Microsoft Edge, ces navigateurs sont tous pris en charge par défaut

Voici les nouvelles fonctionnalités d'ES6 : Objet JavaScript Delay intégré Le code de promesse est présenté en détail Pour plus de contenu connexe, veuillez faire attention au site Web PHP chinois (www.php.cn) !

Déclaration de ce site Web

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Outils d'IA chauds

Undresser.AI Undress

Application basée sur l'IA pour créer des photos de nu réalistes

AI Clothes Remover

Outil d'IA en ligne pour supprimer les vêtements des photos.

Undress AI Tool

Images de déshabillage gratuites

Clothoff.io

Dissolvant de vêtements AI

AI Hentai Generator

Générez AI Hentai gratuitement.

Afficher plus

Article chaud

R.E.P.O. Crystals d'énergie expliqués et ce qu'ils font (cristal jaune)

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Meilleurs paramètres graphiques

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Assassin's Creed Shadows: Solution d'énigmes de coquille

2 Il y a quelques semaines By DDD

R.E.P.O. Comment réparer l'audio si vous n'entendez personne

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

R.E.P.O. Commandes de chat et comment les utiliser

1 Il y a quelques mois By 尊渡假赌尊渡假赌尊渡假赌

Afficher plus

Outils chauds

Bloc-notes++7.3.1

Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise

Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1

Puissant environnement de développement intégré PHP

Dreamweaver CS6

Outils de développement Web visuel

SublimeText3 version Mac

Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Afficher plus

Sujets chauds

Où se trouve l'entrée de connexion pour la messagerie Gmail ?

7530

Tutoriel CakePHP

1378

Quel est le format du nom de compte de Steam

Clé d&amp;amp;amp;amp;amp;amp;#39;activation Win11 permanent

NYT Connexions Indices et réponses

Afficher plus

Related knowledge

Comment mettre en œuvre un système de reconnaissance vocale en ligne à l'aide de WebSocket et JavaScript Dec 17, 2023 pm 02:54 PM

Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de reconnaissance vocale en ligne Introduction : Avec le développement continu de la technologie, la technologie de reconnaissance vocale est devenue une partie importante du domaine de l'intelligence artificielle. Le système de reconnaissance vocale en ligne basé sur WebSocket et JavaScript présente les caractéristiques d'une faible latence, d'un temps réel et d'une multiplateforme, et est devenu une solution largement utilisée. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de reconnaissance vocale en ligne.

WebSocket et JavaScript : technologies clés pour mettre en œuvre des systèmes de surveillance en temps réel Dec 17, 2023 pm 05:30 PM

WebSocket et JavaScript : technologies clés pour réaliser des systèmes de surveillance en temps réel Introduction : Avec le développement rapide de la technologie Internet, les systèmes de surveillance en temps réel ont été largement utilisés dans divers domaines. L'une des technologies clés pour réaliser une surveillance en temps réel est la combinaison de WebSocket et de JavaScript. Cet article présentera l'application de WebSocket et JavaScript dans les systèmes de surveillance en temps réel, donnera des exemples de code et expliquera leurs principes de mise en œuvre en détail. 1. Technologie WebSocket

Comment utiliser JavaScript et WebSocket pour mettre en œuvre un système de commande en ligne en temps réel Dec 17, 2023 pm 12:09 PM

Introduction à l'utilisation de JavaScript et de WebSocket pour mettre en œuvre un système de commande en ligne en temps réel : avec la popularité d'Internet et les progrès de la technologie, de plus en plus de restaurants ont commencé à proposer des services de commande en ligne. Afin de mettre en œuvre un système de commande en ligne en temps réel, nous pouvons utiliser les technologies JavaScript et WebSocket. WebSocket est un protocole de communication full-duplex basé sur le protocole TCP, qui peut réaliser une communication bidirectionnelle en temps réel entre le client et le serveur. Dans le système de commande en ligne en temps réel, lorsque l'utilisateur sélectionne des plats et passe une commande

Comment mettre en œuvre un système de réservation en ligne à l'aide de WebSocket et JavaScript Dec 17, 2023 am 09:39 AM

Comment utiliser WebSocket et JavaScript pour mettre en œuvre un système de réservation en ligne. À l'ère numérique d'aujourd'hui, de plus en plus d'entreprises et de services doivent fournir des fonctions de réservation en ligne. Il est crucial de mettre en place un système de réservation en ligne efficace et en temps réel. Cet article explique comment utiliser WebSocket et JavaScript pour implémenter un système de réservation en ligne et fournit des exemples de code spécifiques. 1. Qu'est-ce que WebSocket ? WebSocket est une méthode full-duplex sur une seule connexion TCP.

Tenir parole : les avantages et les inconvénients de tenir ses promesses Feb 18, 2024 pm 08:06 PM

Dans la vie quotidienne, nous rencontrons souvent des problèmes entre promesses et réalisation. Que ce soit dans une relation personnelle ou dans une transaction commerciale, tenir ses promesses est essentiel pour instaurer la confiance. Cependant, les avantages et les inconvénients de l’engagement sont souvent controversés. Cet article explorera les avantages et les inconvénients des engagements et donnera quelques conseils sur la façon de tenir parole. Les avantages promis sont évidents. Premièrement, l’engagement renforce la confiance. Lorsqu’une personne tient parole, elle fait croire aux autres qu’elle est une personne digne de confiance. La confiance est le lien établi entre les personnes, qui peut les rendre plus

JavaScript et WebSocket : créer un système efficace de prévisions météorologiques en temps réel Dec 17, 2023 pm 05:13 PM

JavaScript et WebSocket : Construire un système efficace de prévisions météorologiques en temps réel Introduction : Aujourd'hui, la précision des prévisions météorologiques revêt une grande importance pour la vie quotidienne et la prise de décision. À mesure que la technologie évolue, nous pouvons fournir des prévisions météorologiques plus précises et plus fiables en obtenant des données météorologiques en temps réel. Dans cet article, nous apprendrons comment utiliser la technologie JavaScript et WebSocket pour créer un système efficace de prévisions météorologiques en temps réel. Cet article démontrera le processus de mise en œuvre à travers des exemples de code spécifiques. Nous

Tutoriel JavaScript simple : Comment obtenir le code d'état HTTP Jan 05, 2024 pm 06:08 PM

Tutoriel JavaScript : Comment obtenir le code d'état HTTP, des exemples de code spécifiques sont requis Préface : Dans le développement Web, l'interaction des données avec le serveur est souvent impliquée. Lors de la communication avec le serveur, nous devons souvent obtenir le code d'état HTTP renvoyé pour déterminer si l'opération a réussi et effectuer le traitement correspondant en fonction de différents codes d'état. Cet article vous apprendra comment utiliser JavaScript pour obtenir des codes d'état HTTP et fournira quelques exemples de codes pratiques. Utilisation de XMLHttpRequest

En savoir plus sur Promise.resolve() Feb 18, 2024 pm 07:13 PM

Une explication détaillée de Promise.resolve() nécessite des exemples de code spécifiques. Promise est un mécanisme en JavaScript pour gérer les opérations asynchrones. Dans le développement réel, il est souvent nécessaire de traiter certaines tâches asynchrones qui doivent être exécutées dans l'ordre, et la méthode Promise.resolve() est utilisée pour renvoyer un objet Promise qui a été rempli. Promise.resolve() est une méthode statique de la classe Promise, qui accepte un

See all articles