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 :
Promise.all([]).then(res=>{
console.log(res)//[]
})Copier après la connexion
Promise.all([1,2,3]).then(res=>{
console.log(res)//[1,2,3]
})Copier après la connexion
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]
})Copier après la connexion
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
})Copier après la connexion
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()Copier après la connexion
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()Copier après la connexion
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)
})Copier après la connexion
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);
});Copier après la connexion
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)//网络不佳
})Copier après la connexion
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){
}Copier après la connexion
应用场景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
})Copier après la connexion
推荐教程：《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!
![[Web front-end] Démarrage rapide de Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
