article Annuaire
brève introduction
objets Promesse: représenter un événement futur (généralement une opération asynchrone) aura lieu.
Il est tout simplement un conteneur, qui tient l'événement prendra fin dans le courant des résultats futurs (généralement une opération asynchrone). Syntaxiquement, Promise est un objet, vous pouvez obtenir des messages de l'opération asynchrone de celui - ci.
Promesse d'un objet ES6, opération asynchrone peut être exprimée dans un processus synchronisé, une bonne solution au problème de l' enfer de rappel.
Callback Hell: un rappel de la fonction de rappel imbriquée ou d'autres phénomènes de couplage élevé. S'il y a un enfer de rappel d'erreur affectera beaucoup d'autres parties, et difficiles à maintenir et le développement secondaire.
Trois états promettent objet
- état d'initialisation (état d'attente): en attente
- état de réussite: fullfilled
- Les États faillis: rejeté
Les étapes de base de la promesse
- Créer une promesse Objets
- Les appels promettent fonction de rappel alors ()
Promise objet possède les deux caractéristiques suivantes.
- Etat de l'objet sans influence extérieure. Trois états: Dans l' attente (en cours), rempli (réussi) et rejeté (échec). Seuls les résultats des opérations asynchrones, vous pouvez décider quel type d'état actuel, aucune autre opération peut changer cet état. Promesse Telle est l'origine du nom, qui signifie en anglais « engagement », at - il dit d' autres moyens ne peuvent être modifiés.
- Une fois le changement d'état, il ne changera pas de temps peut obtenir ce résultat . objet Promise change d' état, que deux possibilités: de l' attente de modifications en attente de devenir remplies et rejeté. Tant que ces deux choses se passe sur l'état de solidification, il ne sera pas changé et gardera le résultat, puis appelé résolu (finalisée).
grammaire
Création d'une syntaxe d'objet de promesse est la suivante:
const promise = new Promise(function(resolve, reject) {
// ... some code
if (/* 异步操作成功 */){
resolve(value);
} else {
reject(error);
}
});
- constructeur Promise prend une fonction comme paramètre, deux paramètres sont la détermination de la fonction et de rejeter. Ce sont deux fonctions fournies par le moteur JavaScript, vous n'avez pas à déployer.
- La fonction est de résoudre le rôle de l'état de l'objet de la promesse « inachevé » à la « réussite » (à savoir, changé de en attente résolu), lors de l'appel avec succès de l'opération asynchrone, et le résultat de l'opération asynchrone, de passer comme paramètre;
- La fonction est de rejeter le rôle de l'état de l'objet de la promesse « inachevé » à « échec » (à savoir, changé de en attente Rejeté), invoquée lorsqu'une opération asynchrone échoue, et les erreurs de fonctionnement asynchrones peuvent être, en tant que paramètre Distribuez .
.puis
Après avoir généré exemple Promise, vous pouvez spécifier un état fonction de rappel résolu par l'Etat et a ensuite rejeté les méthodes.
promise.then(function(value) {
// success
}, function(error) {
// failure
});
pour les châtaignes
Les paramètres suivants peuvent être vu que le code est une promesse flèche fonction constructeur, une fonction de deux paramètres flèche résolution, rejeter. Cette fois , la flèche dans l'état de la fonction « l'attente »
instruction IF pour déterminer l'état d'avancement des opérations asynchrones:
- Si la détermination de la mise en œuvre réussie (), promesse que le statut est automatiquement changée en fullfilled.
- Si elle ne parvient pas à exécuter rejeter (), promesse que le statut est automatiquement changé rejetée.
Les résultats de l'instruction if, qui est exécutée resolve () ou rejeter (), quelle que soit que l' on peut donner de passer des paramètres promise.then (). promise.then(function(value) { // success}, function(error) { // failure });En cas de succès, promise.then effectuera les paramètres de la méthode 1, si elle échoue, il exécutera la méthode paramètre 2.
Le code ci - dessus sorties: 
j'ai écrit la promesse est if(true)exécute si resolve(), alors .thenil exécutera le premier argument de la méthode, qui est la sortie de la « réussite ».
Créer succès ou l'échec de l'objet Promise
C'est, si vous avez besoin pour faire face à la réussite de l' échec du traitement ou tout simplement le résultat, il peut être abrégé. Ci - dessous sont des termes équivalents.
Des erreurs peuvent être capturées puis par le deuxième argument de la méthode peut également être utilisé pour capturer les prises d'erreur. Les versions sont équivalentes.
supplémentaire :
promise
.then(result => {···}) //两个参数方法，前面正确后面错误
.catch(error => {···}) //一个参数方法，只处理错误
.finally(() => {···}); //一个参数方法，正确错误都可以处理，ES2018出现
promesse 和 AJAX
Nous écrivons ajax normalement comme ceci:
var pro = new XMLHttpRequest;
pro.open(method, url);
pro.onreadystatechange = function() {
if (pro.readyState == 4) {
if (pro.status == 200 || pro.status == 304) {
//处理成功请求
} else {
//处理失败请求
}
}
}
pro.send();
Cette promesse et comment il combiné avec ajax. Tant que la promesse de la méthode de paramètre de code pour se déplacer à. Vous pouvez ensuite être traité avec une si détermination de l' instruction () et rejeter ().
Bien sûr, la promesse de paramètres peut être fonction normale, la fonction peut aussi écrire flèche
var ajaxPro = new Promise((resolve, reject) => {})
var ajaxPro = new Promise(function(resolve, reject) {})
pour les châtaignes
Des exemples peuvent être vu dans le succès de ma demande. L'instruction if résolution entrée (pro), puis les paramètres passés ensuite, puis la mise en œuvre de la résolution, à la sortie le résultat de ma demande.
méthode native ajax chercher
Le code ci - dessous est ce que je mets au - dessus de la capture d' écran peut améliorer l'apparence, résument la promesse de celui - ci, puis retourné avec le contenu JSON.parse()dans une chaîne de JavaScript.
let myUrl = "ajax/13promise.json";
//封装起来
function promise(url) {
return new Promise(function(resolve, reject) {
var pro = new XMLHttpRequest;
pro.open("GET", url);
pro.onreadystatechange = function() {
if (pro.readyState == 4) {
if (pro.status == 200 || pro.status == 304) {
resolve(pro);
} else {
reject(pro);
}
}
}
pro.send(null);
})
}
//调用
var ajaxPro = promise(myUrl);
ajaxPro.then(function(result) {
var res = JSON.parse(result.responseText);
console.log(res); //输出 {name: "promisezzz", demo: "hahahahdemo"}
}, function(err) {});
En plus de ce code est d'aider à comprendre la promesse de celui-ci, l'écriture proprement dite de la méthode ajax avec fetch très bien. La récupération de la méthode est donnée ci-dessous:
let myUrl = "ajax/13promise.json";
fetch(myUrl).then(function(result){
var res = result.json();
res.then(function(response){
console.log(response); //输出 {name: "promisezzz", demo: "hahahahdemo"}
})
})
