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

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

黄舟original: 2017-03-07 14:26:431430parcourir

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) {
});

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

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

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>

É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>

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");

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

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

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

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("继续执行");
});

, 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("继续执行")
    })

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

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>

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();
  });
}

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

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：

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

Article précédent：Nouvelles fonctionnalités d'ES6 : explication détaillée du code objet Reflect en JavaScriptArticle suivant：Nouvelles fonctionnalités d'ES6 : explication détaillée du code objet Reflect en JavaScript

Articles Liés

Voir plus