11-利用Promise的圖片異步加載 / Promise封裝ajax，模擬axios / Promise的finally原理

時間 2021-08-13

標籤 html ios ajax app 異步 ide 函數 this url 欄目軟件設計简体版

原文原文鏈接

Promise的圖片異步加載其實就是利用了宏任務先執行，後執行微任務：html

new Promise()的時候，Promise新建後就會當即執行ios

利用這一特性，咱們能夠建立Promise對象的時候，建立image標籤，而後再給img標籤的 src賦值路徑，這樣在then的回調函數中，把其加入到盛放顯示圖片的盒子中，盒子中原來展現是一個缺省圖，等到圖片加載好了，就顯示真正的圖片:ajax

 1 <!DOCTYPE html> 2 <html lang="en"> 3  4 <head> 5     <meta charset="UTF-8"> 6     <meta http-equiv="X-UA-Compatible" content="IE=edge"> 7     <meta name="viewport" content="width=device-width, initial-scale=1.0"> 8     <title>Documenttitle> 9 head>10 <style>11     h1 {12         display: block;13     }14 style>15 16 <body>17     <div id='box'>18         <h1>我是一張缺省圖h1>19     div>20 body>21 22 html>23 <style>24 25 style>26 <script>27     var oBox = document.getElementById('box');28     var oH = document.querySelector('h1')29 30     function loadImageAsync(url) {31         return new Promise(function(resolve, reject) {32             var image = new Image();33 34             image.onload = function() {35                 resolve(image);36             };37 38             image.onerror = function() {39                 reject(new Error('Could not load image at ' + url));40             };41 42             image.src = url;43         });44     }45     // 模擬一下異步加載圖片46     // 用setTimeoutm模擬ajax調用接口，獲取接口返回的圖片路徑，而後傳入函數中，函數中已經提早建立好了47     // 圖片標籤。咱們在.then的回調函數中自行決定插入div容器中作一些事，好比把缺省圖隱藏掉48     setTimeout(() => {49         loadImageAsync('./lion.jpg').then(res => {50             oH.style.display = 'none';51             oBox.appendChild(res);52         })53     }, 1000)54 script>

1秒後顯示圖片：app

Promise封裝ajax異步

 1    function myAxios(url) { 2         return new Promise((resolve, reject) => { 3             let http = new XMLHttpRequest(); 4             http.open('GET', url) 5             http.onreadystatechange = function() { 6                 if (this.readyState !== 4) { 7                     return 8                 } 9                 if (this.status === 200) {10                     resolve(this.response)11                 } else {12                     reject(new Error(this.txt))13                 }14             }15             http.send();16         })17     }18 19     myAxios('').then(res => {20         // 拿到數據21     }).catch(err => {22         // 捕獲錯誤23     })

Promise的finally原理ide