promise并发
一、Pomise.all的使用
Promise.all可以將多個Promise實例包裝成一個新的Promise實例。同時,成功和失敗的返回值是不同的,成功的時候返回的是一個結(jié)果數(shù)組,而失敗的時候則返回最先被reject失敗狀態(tài)的值。
let p1 = new Promise((resolve, reject) => {resolve('成功了') })let p2 = new Promise((resolve, reject) => {resolve('success') })let p3 = Promse.reject('失敗了')Promise.all([p1, p2]).then((result) => {console.log(result) //['成功了', 'success'] }).catch((error) => {console.log(error) })Promise.all([p1,p3,p2]).then((result) => {console.log(result) }).catch((error) => {console.log(error) // 失敗了,打出 '失敗了' })Promse.all在處理多個異步處理時非常有用,比如說一個頁面上需要等兩個或多個ajax的數(shù)據(jù)回來以后才正常顯示
let wake = (time) => {return new Promise((resolve, reject) => {setTimeout(() => {resolve(`${time / 1000}秒后醒來`)}, time)}) }let p1 = wake(3000) let p2 = wake(2000)Promise.all([p1, p2]).then((result) => {console.log(result) // [ '3秒后醒來', '2秒后醒來' ] }).catch((error) => {console.log(error) })當并發(fā)請求中有錯誤返回時,整個請求就返回error信息?
let p1 = new Promise((resolve, reject) => {setTimeout(() => {resolve('success')},500) })let p2 = new Promise((resolve, reject) => {setTimeout(() => {reject('failed')}, 10000) }) Promise.all([p1, p2]).then((result) => {console.log(result) }).catch((error)=>{console.log(error) // failed })需要特別注意的是,Promise.all獲得的成功結(jié)果的數(shù)組里面的數(shù)據(jù)順序和Promise.all接收到的數(shù)組順序是一致的,即p1的結(jié)果在前,即便p1的結(jié)果獲取的比p2要晚。這帶來了一個絕大的好處:在前端開發(fā)請求數(shù)據(jù)的過程中,偶爾會遇到發(fā)送多個請求并根據(jù)請求順序獲取和使用數(shù)據(jù)的場景,使用Promise.all毫無疑問可以解決這個問題。
二、Promise.race的使用
顧名思義,Promse.race就是賽跑的意思,意思就是說,Promise.race([p1, p2, p3])里面哪個結(jié)果獲得的快,就返回那個結(jié)果,不管結(jié)果本身是成功狀態(tài)還是失敗狀態(tài)。
let p1 = new Promise((resolve, reject) => {setTimeout(() => {resolve('success')},1000) })let p2 = new Promise((resolve, reject) => {setTimeout(() => {reject('failed')}, 500) })Promise.race([p1, p2]).then((result) => {console.log(result) }).catch((error) => {console.log(error) // 打開的是 'failed' })原理是挺簡單的,但是在實際運用中,比如一個場景:直播路線,給用戶發(fā)最快的那個路線。
總結(jié)
- 上一篇: vue3中websocket用法
- 下一篇: 手写vue2的Lazyload