Tutoriel sur l'utilisation de base de Promise

Cet article partage principalement avec vous le tutoriel d'utilisation de base de Promise. Ma compréhension personnelle est d'utiliser la programmation synchrone pour effectuer des opérations de programmation asynchrone. J'espère que cela aide tout le monde.

const promise = new Promise((resolve, reject) => {
    //some asynchronous  code
    setTimeout(() => {
        console.log('执行完成');
        resolve('some data');
    }, 2000);
});

Promise reçoit une fonction en tant que paramètre. La fonction a deux paramètres, resolve et reject représentent respectivement la fonction de rappel réussie et la fonction de rappel échouée après l'exécution de l'opération asynchrone.

Promise sera exécuté immédiatement après l'instance. Par conséquent, une fonction est généralement utilisée pour l'inclure

function runAsync() {
    return new Promise((resolve, reject) => {
        //some asynchronous  code
        setTimeout(() => {
            console.log('执行完成');
            resolve('some data');
        }, 2000);
    });
}
runAsync().then((data) => {
    console.log(data);//可以使用异步操作中的数据
})

runAsync() Après l'exécution, la méthode then est appelée then() est équivalente à la fonction de rappel que nous avons écrite précédemment.

résoudre et rejeter

function paramTest(){
    return new Promise((resolve, reject) => {
        let number = Math.ceil(Math.random() * 10);
        if (number < 5) {
            resolve(number);
        }else{
            reject(&#39;out of range&#39;);
        }
    })
}
paramTest().then((number) => {
    console.log('resolved');
    console.log(number);
},(reason) => {
    console.log('rejected');
    console.log(reason);
})

Promise ont trois états : pending (en cours), fulfilled (réussi) et rejected (échec)

paramTest() Les exemples ont deux situations :

• Quand number < 5, nous considérons cela comme une situation de réussite et changeons le statut de pending à fulfilled

• Lorsque number >= 5, nous considérons cela comme une condition d'échec et changeons le statut de pending à rejected

donc paramTest() Résultat de l'exécution :

fulfilled	rejected
resolved	rejected
number	out of range

Utilisation de catch

Nous continuons d'appeler la méthode paramTest exemple

paramTest().then((number) => {
    console.log('resolved');
    console.log(number);
    console.log(data); //data为未定义
},(reason) => {
    console.log('rejected');
    console.log(reason);
}).catch((err) => {
    console.log(err);
})

catch est en fait un alias de .then(null, rejection). est aussi une fonction de rappel utilisée pour gérer les échecs, mais elle a aussi une autre fonction : si une erreur se produit dans le rappel resolve, elle ne sera pas bloquée et le rappel dans catch sera exécuté. L'utilisation de la méthode

all

const p = Promise.all([p1, p2, p3]);

p.then(result => {
    console.log(result);
})

all reçoit un paramètre de tableau. Chaque élément du tableau renvoie un objet Promise Seulement lorsque tous les p1, p2, p3 sont exécutés. le rappel then. p1, p2, p3 Les données renvoyées seront transmises au rappel then sous la forme d'un tableau. L'utilisation de

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('p1');
    }, 1000);
})
.then(result => result)
.catch(e => e);

const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('p2');
    }, 3000);
})
.then(result => result)
.catch(e => e);

Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
//3秒后输出['p1', 'p2']

race

const p = Promise.race([p1, p2, p3]);

p.then(result => {
    console.log(result);
})

race est exactement la même que celle de all La différence est que la méthode all nécessite que chaque paramètre soit renvoyé avec succès. then sera exécuté ; et race exécutera le rappel then tant que l'un des paramètres sera renvoyé avec succès.

Ce qui suit est un exemple de race Par rapport à la méthode all, vous pouvez voir qu'il existe une nette différence dans la valeur de retour.

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('p1');
    }, 1000);
})
.then(result => result)
.catch(e => e);

const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve('p2');
    }, 3000);
})
.then(result => result)
.catch(e => e);

Promise.race([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
//1秒后输出 'p1'

Cliquez ici pour voir le code source de l'exemple dans cet article

resloader est un plug-in basé sur Promise qui précharge les images et affiche la progression du chargement Cliquez sur. ici pour en savoir plus. Si vous vous sentez bien, n'hésitez pas à suivre

Recommandations associées :

Utilisez Promise pour simplifier les rappels

L'applet WeChat La promesse est Partage d'exemples de rappel simplifié

Comment utiliser correctement la promesse de jQuery

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!