Einige gängige Anwendungsszenarien von Front-End-Promise

In diesem Artikel werden die gängigen Anwendungsszenarien von Promise in unserer Projektentwicklung basierend auf meiner eigenen Verwendung von ES6 Promise zusammengefasst. Natürlich ist Promise möglicherweise nicht die einzige Option, aber als qualifizierter Front-End-Entwickler müssen wir es verstehen Es.

Promise.all

Syntax: Promise.all (iterierbar)

Parameter: ein iterierbares Objekt, z. B. Array.

Rückgabewert:

• Wenn das übergebene Iterable leer ist, handelt es sich um ein aufgelöstes Promise.
  

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

• Ein Versprechen, das asynchron aufgelöst wird (wenn das übergebene Iterable kein Versprechen enthält). Beachten Sie, dass Google Chrome 58 in diesem Fall eingelöste Versprechen zurückgibt.

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

• Dieses zurückgegebene Versprechen wird asynchron aufgelöst/abgelehnt, wenn alle Versprechen in der angegebenen Iterable aufgelöst wurden oder wenn ein Versprechen abgelehnt wurde (wenn der Stapel ist leer)

  1. Wenn alle Versprechen im gegebenen iterierbaren Objekt aufgelöst wurden

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. Wenn alle Versprechen im gegebenen iterierbaren Objekt aufgelöst wurden. Wenn irgendein Versprechen wird abgelehnt

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
})

Beschreibung:

Diese Methode ist nützlich, um die Ergebnisse mehrerer Versprechen zu aggregieren. In ES6 können mehrere asynchrone Promise.all-Anfragen parallel ausgeführt werden:

1. Wenn alle Ergebnisse erfolgreich zurückgegeben werden, wird der Erfolg in der Anforderungsreihenfolge zurückgegeben.

2. Wenn eine Fehlermethode vorliegt, geben Sie die Fehlermethode 1 ein. Mehrere Anfrageergebnisse werden zusammengeführt

Detaillierte Beschreibung: Eine Seite hat mehrere Anfragen. Wir benötigen alle Anfragen, um Daten zurückzugeben, bevor wir das Rendering zusammen verarbeiten

Denke: Bei gleichzeitigen Anfragen muss der Ladestatus für jede Anfrage separat festgelegt werden. Bei mehreren Ladevorgängen kann es zu Überschneidungen kommen. Der auf der Seite angezeigte Inhalt hängt von der Geschwindigkeit ab, mit der die Daten zurückgegeben werden Dies spiegelt sich insbesondere im Rendering-Prozess wider. Um die Benutzererfahrung zu verbessern, können wir alle Anforderungen verwenden, um Daten zurückzugeben und sie dann zusammen zu rendern. Zu diesem Zeitpunkt deaktivieren wir die separate Ladeeinstellung der Anforderung und fassen die Anforderungsergebnisse über Promise zusammen .all. Von Anfang bis Ende legen wir nur eine Ladung fest.

//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()

Anwendungsszenario 2: Anforderungsergebnisse zusammenführen und Fehler behandeln

Beschreibung: Wir müssen die Datenrendering- und Fehlerbehandlungslogik von a verwalten Wenn es mehrere Anfragen gibt, müssen wir

an mehreren Stellen schreiben: Können wir mehrere Anfragen zusammenführen, werden sie nur an uns zurückgegeben Verwalten Sie einfach die Daten- und Fehlerlogik an einem Ort.

//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()

Manchmal hängt die Seite auf, vielleicht aufgrund einer Schnittstellenausnahme, oder vielleicht ist es nur eine unbedeutende Schnittstelle, die aufhängt. Warum hängt sich eine Schnittstelle auf, was dazu führt, dass auf der gesamten Seite keine Daten vorhanden sind? Promise.all teilt uns mit, dass der Callback der then-Methode nicht mehr ausgeführt wird, wenn ein Versprechen im Parameter fehlschlägt (abgelehnt) und der Rückruf dieser Instanz fehlschlägt

Anwendungsszenario 3: Überprüfen Sie, ob mehrere Anfrageergebnisse die Bedingungen erfüllen

Beschreibung: Führen Sie in einem WeChat-Applet-Projekt eine Sicherheitsüberprüfung des Eingabeinhalts eines Formulars durch. aufgerufen Es handelt sich um eine von Cloud-Funktionen geschriebene Methode. Es gibt 7 Felder im Formular, die überprüft werden müssen. Sie werden alle von einer Schnittstelle zur Inhaltssicherheitsüberprüfung aufgerufen. Wenn alle Überprüfungen erfolgreich sind, kann die normale Übermittlung durchgeführt werden 🎜>

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

Syntax: Promise.race(iterable)

---

Parameter: iterierbares iterierbares Objekt, z. B. Array. Iterierbar.

Rückgabewert: Die Promise.race(iterable)-Methode gibt ein Versprechen zurück, sobald ein Versprechen im Iterator aufgelöst oder abgelehnt wird, wird das zurückgegebene Versprechen aufgelöst oder abgelehnt

BeschreibungDie Race-Funktion gibt ein Versprechen zurück, das auf die gleiche Weise erfüllt wird wie das zuerst übergebene Versprechen. Es kann entweder aufgelöst (aufgelöst) werden oder fehlschlagen (zurückgewiesen), je nachdem, welche der beiden Aufgaben zuerst abgeschlossen wurde.

Wenn die übergebene Iteration leer ist, wird das zurückgegebene Versprechen ewig warten.

Wenn die Iteration einen oder mehrere Nicht-Versprechenswerte und/oder gelöste/abgelehnte Versprechen enthält, löst Promise.race den ersten in der Iteration gefundenen Wert auf.

Anwendungsszenario 1: Zeitüberschreitung bei Bildanforderung

//请求某个图片资源
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);
});

Anwendungsszenario 2: Zeitüberschreitung bei Anforderungsaufforderung

Beschreibung: Manchmal lesen wir in einer Sekunde die Nachrichten, und nachdem wir den Aufzug betreten, werden wir in der nächsten Sekunde auf der Mobiltelefonseite darauf hingewiesen, dass „das Netz nicht gut ist“

//请求
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)//网络不佳
})

Versprochen .prototype.then

Anwendungsszenario 1: Die nächste Anfrage hängt vom Ergebnis der vorherigen Anfrage ab

描述：类似微信小程序的登录，首先需要 执行微信小程序的 登录 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教程》

Das obige ist der detaillierte Inhalt vonEinige gängige Anwendungsszenarien von Front-End-Promise. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!