Quelques scénarios d'application courants de la promesse frontale

Cet article résumera les scénarios d'application courants de Promise dans notre développement de projet en fonction de ma propre utilisation d'ES6 Promise. Bien sûr, Promise n'est peut-être pas la seule option, mais en tant que développeur front-end qualifié, nous devons comprendre. il.

Promise.all

Syntaxe : Promise.all (itérable)

Paramètre : un objet itérable, tel qu'un Array.

Valeur de retour :

• Si l'itérable passé est vide, c'est une promesse qui a été résolue.
  

Promise.all([]).then(res=>{
    console.log(res)//[]
})

• Une promesse qui se résout de manière asynchrone (si l'Iterable passé ne contient pas de promesse). Notez que Google Chrome 58 renvoie des promesses résolues dans ce cas.

Promise.all([1,2,3]).then(res=>{
    console.log(res)//[1,2,3]
})

• Cette promesse renvoyée sera résolue/rejetée de manière asynchrone lorsque toutes les promesses de l'itérable donné auront été résolues, ou lorsqu'une promesse aura été rejetée (lorsque la pile est vide)

  1. Lorsque toutes les promesses de l'objet itérable donné ont été résolues

let promise1 = new Promise((resolve,reject)=>{
    resolve(1)
})
let promise2 = new Promise((resolve,reject)=>{
    resolve(2)
})

Promise.all([promise1,promise2,3]).then(res=>{
    console.log(res)//[1,2,3]
})

2. Lorsque toutes les promesses de l'objet itérable donné ont été résolues Lorsqu'une promesse est rejeté

let promise1 = new Promise((resolve,reject)=>{
    resolve(1)
})
let promise2 = new Promise((resolve,reject)=>{
    reject(2)
})

Promise.all([promise1,promise2,3]).then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)//2
})

Description :

Cette méthode est utile pour agréger les résultats de plusieurs promesses. Dans ES6, plusieurs requêtes asynchrones Promise.all peuvent être exécutées en parallèle :

. 1. Lorsque tous les résultats sont renvoyés avec succès, le succès est renvoyé dans l'ordre de la demande ;

2 Lorsqu'il y a une méthode d'échec, entrez la méthode d'échec

Scénario d'application 1 : Les résultats de plusieurs requêtes sont fusionnés

Description détaillée : une page contient plusieurs requêtes. Nous avons besoin que toutes les requêtes renvoient des données avant de traiter le rendu ensemble

Réflexion : S'il y a des demandes simultanées, l'état de chargement de chaque demande doit être défini séparément. S'il y a plusieurs chargements, plusieurs chargements peuvent se chevaucher. Le contenu affiché sur la page variera en fonction de la vitesse de retour des données en fonction de la demande. spécifiquement reflété dans le processus de rendu. Afin d'améliorer l'expérience utilisateur, nous pouvons utiliser toutes les requêtes pour renvoyer des données, puis les restituer ensemble. À ce stade, nous désactivons le paramètre de chargement séparé de la requête et résumons les résultats de la requête via Promise. .all Du début à la fin, nous n’avons défini qu’un seul chargement.

//1.获取轮播数据列表
function getBannerList(){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
            resolve('轮播数据')
        },300)
    })
}

//2.获取店铺列表
function getStoreList(){
   return new Promise((resolve,reject)=>{
        setTimeout(function(){
            resolve('店铺数据')
        },500)
    })
}

//3.获取分类列表
function getCategoryList(){
   return new Promise((resolve,reject)=>{
        setTimeout(function(){
            resolve('分类数据')
        },700)
    })
}

function initLoad(){
    // loading.show() //加载loading
    Promise.all([getBannerList(),getStoreList(),getCategoryList()]).then(res=>{
        console.log(res)
        // loading.hide() //关闭loading
    }).catch(err=>{
        console.log(err)
        // loading.hide()//关闭loading
    })
}
//数据初始化    
initLoad()

Scénario d'application 2 : Fusionner les résultats de la demande et gérer les erreurs

Description : Nous devons gérer la logique de rendu des données et de gestion des erreurs d'un demande séparément, s'il y a plusieurs demandes, nous devons écrire

à plusieurs endroits. En pensant : pouvons-nous fusionner plusieurs demandes ensemble ? Même si certaines demandes échouent, elles nous seront renvoyées uniquement. Gérez simplement les données et la logique des erreurs en un seul endroit.

//1.获取轮播图数据列表
function getBannerList(){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
            // resolve('轮播图数据')
            reject('获取轮播图数据失败啦')
        },300)
    })
}

//2.获取店铺列表
function getStoreList(){
   return new Promise((resolve,reject)=>{
        setTimeout(function(){
            resolve('店铺数据')
        },500)
    })
}

//3.获取分类列表
function getCategoryList(){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
            resolve('分类数据')
        },700)
    })
}

function initLoad(){
    // loading.show()
    Promise.all([
        getBannerList().catch(err=>err),
        getStoreList().catch(err=>err),
        getCategoryList().catch(err=>err)
    ]).then(res=>{
        console.log(res) // ["获取轮播图数据失败啦", "店铺数据", "分类数据"]
        
        if(res[0] == '轮播图数据'){
            //渲染
        }else{
            //获取 轮播图数据 失败的逻辑
        }
        if(res[1] == '店铺数据'){
            //渲染
        }else{
            //获取 店铺列表数据 失败的逻辑
        }
        if(res[2] == '分类数据'){
            //渲染
        }else{
             //获取 分类列表数据 失败的逻辑
        }
        
        // loading.hide()
    })
}

initLoad()

Parfois, la page raccroche, peut-être à cause d'une exception d'interface, ou peut-être que c'est juste une interface insignifiante qui raccroche. Alors pourquoi une interface raccroche-t-elle, ce qui entraîne l'absence de données sur toute la page ? Promise.all nous dit que si une promesse dans le paramètre échoue (rejetée) et que le rappel de cette instance échoue (rejet), le rappel de la méthode then ne sera plus exécuté. Le cas d'utilisation ci-dessus peut résoudre ce problème

Scénario d'application 3 : Vérifier si les résultats de plusieurs requêtes remplissent les conditions

Description : Dans un projet d'applet WeChat, effectuer une vérification de sécurité du contenu d'entrée d'un formulaire, appelé C'est une méthode écrite par les fonctions cloud. Il y a 7 champs dans le formulaire qui doivent être vérifiés. Ils sont tous appelés par une interface de vérification de la sécurité du contenu. Si toutes les vérifications sont réussies, la soumission normale peut être effectuée

<.>

function verify1(content){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
            resolve(true)
        },200)
    })
}

function verify2(content){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
            resolve(true)
        },700)
    })
}

function verify3(content){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
            resolve(true)
        },300)
    })
}



Promise.all([verify1('校验字段1的内容'),verify2('校验字段2的内容'),verify3('校验字段3的内容')]).then(result=>{
    console.log(result)//[true, true, true]

    let verifyResult = result.every(item=>item)
    //验证结果
    console.log(verifyResult?'通过验证':'未通过验证')// 通过验证
}).catch(err=>{
    console.log(err)
})

Promise .race

---

Syntaxe : Promise.race(iterable)

Paramètres

 : objet itérable itérable, tel que Array . Itérable.

Valeur de retour

 : La méthode Promise.race(iterable) renvoie une promesse une fois qu'une promesse dans l'itérateur est résolue ou rejetée, la promesse renvoyée sera résolue ou rejetée

Description

La fonction race renvoie une Promesse qui sera remplie de la même manière que la première promesse passée. Il peut soit être résolu (résoudre), soit échouer (rejeter), selon celui des deux terminé en premier. Si l'itération passée est vide, la promesse renvoyée attendra éternellement.

Si l'itération contient une ou plusieurs valeurs non promises et/ou des promesses résolues/rejetées, Promise.race se résoudra à la première valeur trouvée dans l'itération.

Scénario d'application 1 : Délai d'expiration de la demande d'image

//请求某个图片资源
function requestImg(){
    var p = new Promise(function(resolve, reject){
        var img = new Image();
        img.onload = function(){
           resolve(img);
        }
        //img.src = "https://b-gold-cdn.xitu.io/v3/static/img/logo.a7995ad.svg"; 正确的
        img.src = "https://b-gold-cdn.xitu.io/v3/static/img/logo.a7995ad.svg1";
    });
    return p;
}

//延时函数，用于给请求计时
function timeout(){
    var p = new Promise(function(resolve, reject){
        setTimeout(function(){
            reject('图片请求超时');
        }, 5000);
    });
    return p;
}

Promise
.race([requestImg(), timeout()])
.then(function(results){
    console.log(results);
})
.catch(function(reason){
    console.log(reason);
});

Scénario d'application 2 : Invite d'expiration du délai de demande

Description : Parfois, nous lisons les informations une seconde, et après être entré dans l'ascenseur la seconde suivante, il vous sera demandé sur la page du téléphone portable que "le réseau n'est pas bon"

//请求
function request(){
    return new Promise(function(resolve, reject){
       setTimeout(()=>{
            resolve('请求成功')
       },4000)
    })
}

//请求超时提醒
function timeout(){
    var p = new Promise(function(resolve, reject){
        setTimeout(function(){
            reject('网络不佳');
        }, 3000);
    });
    return p;
}



Promise.race([
    request(),
    timeout()
])
.then(res=>{
    console.log(res)
}).catch(err=>{
    console.log(err)//网络不佳
})

Promesse .prototype.then

---

Scénario d'application 1 : La requête suivante dépend du résultat de la requête précédente

描述：类似微信小程序的登录，首先需要 执行微信小程序的 登录 wx.login 返回了code，然后调用后端写的登录接口，传入 code ，然后返回 token ，然后每次的请求都必须携带 token，即下一次的请求依赖上一次请求返回的数据

function A(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve('B依赖的数据')
        },300)
    })
}
function B(prams){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(prams + 'C依赖的数据')
        },500)
    })
}
function C(prams){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(prams)
        },1000)
    })
}

//我们期望的是走 try ，由于A B C模拟的请求中都是没有reject，用 try catch 捕获错误
try{
    A().then( res=>B(res) ).then( res=>C(res) ).then( res=>{
        console.log(res)//B依赖的数据C依赖的数据
    })   
} catch(e){
    
}

应用场景2：中间件功能使用

描述：接口返回的数据量比较大，在一个then 里面处理 显得臃肿，多个渲染数据分别给个then，让其各司其职

//模拟后端返回的数据

let result = {
    bannerList:[
        {img:'轮播图地址'}
    //...
    ],
    storeList:[
        {name:'店铺列表'}
    //...
    ],
    categoryList:[
        {name:'分类列表'}
    //...
    ],
    //...
}

function getInfo(){
    return new Promise((resolve,reject)=>{
        setTimeout(()=>{
            resolve(result)
        },500)
    })
}

getInfo().then(res=>{

    let { bannerList } = res
    //渲染轮播图
    console.log(bannerList)
    return res
}).then(res=>{
    
    let { storeList } = res
    //渲染店铺列表
    console.log(storeList)
    return res
}).then(res=>{
    let { categoryList } = res
    console.log(categoryList)
    //渲染分类列表
    
    return res
})

推荐教程：《JS教程》

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!