Référence : https://es6.ruanyifeng.com/#docs/promise
Fonctions communes
Promise.prototype.then()
Promise.prototype.catch()
Promise.prototype.finally()
Promise.all()
Promise.race() //率先改变状态，p的状态就跟着改变
Promise.allSettled()
Promise.any()
Promise.resolve()
Promise.reject()
Promise.try()
Table des matières
-
- qu'est-ce que la promesse?
- Caractéristiques des promesses
- Utilisation de base des promesses
- Utilisation de puis
- Enchaîné puis utilisation
- méthode de capture
- méthode enfin
- méthode promise.all()
- méthode promise.race()
- fonction asynchrone
- attendre la commande
- la gestion des erreurs
- Propriétés associées
qu'est-ce que la promesse?
Promise, qui est simplement un conteneur contenant le résultat d'un événement (généralement une opération asynchrone) qui se terminera dans le futur. Syntaxiquement, Promiseun objet à partir duquel des messages pour des opérations asynchrones peuvent être obtenus. PromiseFournissez une API unifiée et diverses opérations asynchrones peuvent être traitées de la même manière. En termes simples, le rôle de la promesse est 将异步操作以同步操作的流程表达出来d'éviter les fonctions de rappel imbriquées.
Caractéristiques des promesses
- Une opération asynchrone de promesse a trois états :
进行中，已成功，已失败. Seules les opérations asynchrones peuvent modifier cet état. - Une fois que l'état de la promesse a changé, il ne changera plus. Il existe deux possibilités pour modifier l'objet de la promesse,
进行中—>已成功，进行中—>已失败.
Utilisation de base des promesses
Un objet de promesse est une 构造函数instance de promesse utilisée pour générer :
const promise = new Promise(function(resolve, reject) {
// ...
if (/* 满足条件 成功 反之失败 */){
resolve(value);
} else {
reject(error);
}
});
Exemple:
promise1(){
new Promise(function(resolve, reject) {
let intData = Math.floor (Math.random()*10)
if (intData > 3){
resolve('数据正确，大于3');
} else {
reject('数据错误，小于3');
}
}).then(res=>{
console.log(res)
}).catch(e=>{
console.log(e)
})
}
Les paramètres acceptés sont resolveet rejectdeux fonctions :
resolve的作用: l'état de l'objet promise par 进行中—>已完成. Et passez le résultat de l'opération asynchrone en paramètre
rejected的作用: passez l'état de l'objet promise par 进行中—>已失败et la raison de l'échec asynchrone en paramètre.
Utilisation de puis
La méthode then peut accepter deux fonctions de rappel en tant que paramètres. La première fonction de rappel est appelée lorsque l'état de l'objet de promesse est résolu (terminé) et la seconde fonction de rappel (facultative) est appelée lorsque l'état de l'objet de promesse est rejeté ( échoué). ) lorsqu'il est appelé.
function timeout(ms) {
return new Promise((resolve, reject) => {
setTimeout(resolve, ms, 'done');
});
}
timeout(100).then((value) => {
console.log(value);
});
Enchaîné puis utilisation
La méthode then renvoie une nouvelle instance de Promise (notez que ce n'est pas l'instance de Promise d'origine). Par conséquent, la méthode d'écriture en chaîne peut être utilisée, c'est-à-dire qu'une autre méthode then est appelée après la méthode then.
getJSON("/post/1.json").then(function(post) {
return getJSON(post.commentURL);
}).then(function funcA(comments) {
// 成功
console.log("resolved: ", comments);
}, function funcB(err){
// 错误
console.log("rejected: ", err);
});
Dans le code ci-dessus, la fonction de rappel spécifiée par la méthode first then renvoie un autre objet Promise. À ce stade, la fonction de rappel spécifiée par la seconde méthode then attendra que l'état du nouvel objet Promise change. S'il est résolu, funcA est appelé, et si l'état est rejeté, funcB est appelé.
méthode de capture
Dans l'objet promise, si l'opération asynchrone génère une erreur, le statut sera rejeté et la fonction de rappel spécifiée par la méthode catch sera appelée pour gérer l'erreur. De plus, la fonction de rappel spécifiée par la méthode then sera également intercepté si une erreur est renvoyée pendant l'opération.
p.then((val) => console.log('fulfilled:', val))
.catch((err) => console.log('rejected', err));
// 等同于
// 等同于
p.then((val) => console.log('fulfilled:', val))
.then(null, (err) => console.log("rejected:", err));
L'erreur de l'objet promesse a une nature "bouillonnante" et sera passée en arrière jusqu'à ce qu'elle soit interceptée, c'est-à-dire qu'elle ignorera la fonction then au milieu
getJSON('/post/1.json').then(function(post) {
return getJSON(post.commentURL);
}).then(function(comments) {
// some code
}).catch(function(error) {
// 处理前面三个Promise产生的错误
});
méthode enfin
La méthode finally est utilisée pour spécifier une action qui sera exécutée quel que soit l'état final de l'objet promesse.
server.listen(port).then(function () {
// ...
}).finally(server.stop);
Le serveur gère la demande avec une promesse, puis arrête le serveur avec la méthode finally().
méthode promise.all()
La méthode promise.all est utilisée pour encapsuler plusieurs instances de promesse dans une nouvelle instance de promesse.
const p = Promise.all([p1, p2, p3]);
La méthode Promise.all accepte un tableau comme paramètre, dont les éléments sont tous des instances de promesse, 如果不是，则会自动将参数转变为promie实例.
L'état de p est déterminé par les éléments de son tableau, qui sont divisés en deux états (en utilisant l'exemple ci-dessus)
Ce n'est que lorsque l'état de p1 p2 p3 devient rempli (terminé) qu'il devient rempli (terminé).À ce moment, les valeurs de retour de p1 p2 p3 forment un tableau et le transmettent à la fonction de rappel de p.
Parmi p1 p2 p3, un est rejeté (inachevé), et le statut de p deviendra rejeté (inachevé).A ce moment, la valeur de retour de la première instance rejetée sera passée à la fonction de rappel de p.
méthode promise.race()
La méthode Promise.race encapsule également plusieurs instances de Promise dans une nouvelle instance de Promise
const p = Promise.race([p1, p2, p3]);
一个实例率先改变Il existe des états parmi p1, p2 et p3 , p的状态就跟着改变. La valeur de retour de l'instance Promise qui a été modifiée en premier est transmise à la fonction de rappel de p.
fonction asynchrone
Remarquer:! ! La commande await ne peut être utilisée que dans les fonctions asynchrones et une erreur sera signalée dans les fonctions ordinaires.
L'introduction d'async rend les opérations asynchrones plus pratiques.Qu'est-ce que la fonction async, en fait, c'est le sucre syntaxique de la fonction Generator. Faites en sorte que les fonctions asynchrones et les fonctions de rappel ressemblent davantage à des fonctions synchrones dans la syntaxe. Le générateur n'est pas présenté ici. Passons directement à l'apprentissage asynchrone
La valeur de retour de async est un objet de promesse, vous pouvez donc utiliser la méthode then pour ajouter une fonction de rappel. Lorsque la fonction est exécutée, une fois qu'elle rencontre l'attente, elle reviendra en premier, attendra que l'opération asynchrone soit terminée, puis s'exécutera le contenu derrière le corps de la fonction.
async function getStockPriceByName(name) {
const symbol = await getStockSymbol(name);
const stockPrice = await getStockPrice(symbol);
return stockPrice;
}
getStockPriceByName('goog').then(function (result) {
console.log(result);
});
La forme d'utilisation de la fonction asynchrone
//函数声明
async function foo(){
}
//函数表达式
const foo = async function（）{
}；
//对象的方法
let obj = {
async foo(){
}};
obj.foo().then(...)
//箭头函数
const foo =async()=>{
}；
La valeur renvoyée par l'instruction return dans la fonction async deviendra le paramètre de la fonction d'appel de la méthode then.
async function f(){
return ‘hello world’；
}
f().then(v=> console.log(v))
//"hello world"
attendre la commande
Dans des circonstances normales, la commande await est suivie d'un objet de promesse, sinon, il sera automatiquement converti en objet de promesse
async function f(){
return await 123;
}
f().then(v =>console.log(v))
//123
async function f() {
await Promise.reject('出错了');
await Promise.resolve('hello world'); // 不会执行
}
la gestion des erreurs
Si l'opération asynchrone derrière l'attente est erronée, alors l'objet de promesse équivalent à celui renvoyé par la fonction asynchrone sera rejeté (comme mentionné ci-dessus en parlant de l'objet de promesse, nature bouillonnante)
async function f() {
await new Promise(function (resolve, reject) {
throw new Error('出错了');
});
}
f().then(v => console.log(v))
.catch(e => console.log(e))
// Error：出错了
Utilisez les blocs try...catch pour éviter les erreurs.
async function f() {
try {
await new Promise(function (resolve, reject) {
throw new Error('出错了');
});
} catch(e) {
}
return await('hello world');
}
Plusieurs commandes d'attente sont placées dans des structures try...catch
async function main() {
try {
const val1 = await firstStep();
const val2 = await secondStep(val1);
const val3 = await thirdStep(val1, val2);
console.log('Final: ', val3);
}
catch (err) {
console.error(err);
}
}
Propriétés associées
La différence entre allSettled() et all()
- all() renvoie un wrapper direct
resolve内容的数组, allSettled() renvoie un wrapper对象的数组. - all() Si un objet Promise signale une erreur, all() ne peut pas être exécuté, votre erreur sera signalée et d'autres données réussies ne pourront pas être obtenues. La méthode allSettled() renvoie toutes les données de l'instance Promise dans un objet, qu'il y ait ou non une erreur. S'il s'agit de données résolues, la valeur d'état est satisfaite, sinon elle est rejetée.
Promise.resolve() 与 Promise.reject()
resolve 成功
reject 失败
Promise.try()
Dépanner.