摘要:現在不會用都不好意思說自己是前端,為什么火起來,一句話解決了回調嵌套和執行順序問題最重要的我感覺是解決順序問題。
現在不會用Promise都不好意思說自己是前端,Promise為什么火起來,一句話解決了回調嵌套和執行順序問題最重要的我感覺是解決順序問題。
不過開始寫之前我們先看看,promise怎么解決問題,怎么用。
列舉一個順序加載圖片demo:
//需求 加載三張圖片 img1,img2,img3,加載順序是1,2,3 let url1 = "https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3293635140,3955114282&fm=26&gp=0.jpg" let url2 = "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1019333328,1858047370&fm=26&gp=0.jpg" let url3 = "https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=4226468334,723383513&fm=26&gp=0.jpg" let oImg1 = new Image() oImg1.onload = function() { console.log("img1加載完畢") let oImg2 = new Image() oImg2.onload = function() { console.log("img2加載完畢") let oImg3 = new Image() oImg3.onload = function() { console.log("img3加載完畢") console.log("全部加載完畢") } oImg3.src = url3 } oImg2.src = url2 } oImg1.src = url1
//結果沒毛病
接下來我們試試promise怎么做,
function loadImg(url) { let img = new Image() img.src = url return new Promise((resolve, reject) => { img.onload = () => { console.log(url) resolve() } img.onerror = (e) => { reject(e) } }) } loadImg(url1).then(() => { return loadImg(url2) }).then(() => { return loadImg(url3) })
接下來再看看Promise.all,
//需求 加載三張圖片 img1,img2 全部加載完成做一些事情 let urls = ["https://ss0.bdstatic.com/70cFvHSh_Q1YnxGkpoWK1HF6hhy/it/u=3293635140,3955114282&fm=26&gp=0.jpg", "https://ss0.bdstatic.com/70cFuHSh_Q1YnxGkpoWK1HF6hhy/it/u=1019333328,1858047370&fm=26&gp=0.jpg" ] function loadImg(url) { let img = new Image() img.src = url return new Promise((resolve, reject) => { img.onload = () => { resolve(img) } img.onerror = (e) => { reject(e) } }) } function loadAll(arr) { let result = [] arr.forEach(item => { let p = loadImg(item).then((img) => { console.log(img) }) //存儲當前Promise對象 console.log(p) result.push(p) }); Promise.all(result).then(() => { //全部完成 console.log("done") }).catch((err) => { // 有失敗的情況 console.log(err) }); } loadAll(urls)
完成。。。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/101145.html
摘要:并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔,優化項目,在瀏覽器端的層面上提升速度,幫助初中級前端工程師快速搭建項目。 本文是關注微信小程序的開發和面試問題,由基礎到困難循序漸進,適合面試和開發小程序。并總結vue React html css js 經典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔,優化項目,在瀏覽器端的層面上提升速度,幫助初中級前端工程師快...
摘要:并總結經典面試題集各種算法和插件前端視頻源碼資源于一身的文檔,優化項目,在瀏覽器端的層面上提升速度,幫助初中級前端工程師快速搭建項目。 本文是關注微信小程序的開發和面試問題,由基礎到困難循序漸進,適合面試和開發小程序。并總結vue React html css js 經典面試題 集各種算法和插件、前端視頻源碼資源于一身的文檔,優化項目,在瀏覽器端的層面上提升速度,幫助初中級前端工程師快...
閱讀 2351·2021-11-25 09:43
閱讀 2864·2021-11-24 09:39
閱讀 2926·2019-08-30 11:10
閱讀 1130·2019-08-29 16:34
閱讀 595·2019-08-29 13:25
閱讀 3358·2019-08-29 11:21
閱讀 2861·2019-08-26 11:39
閱讀 2394·2019-08-26 11:34