Promise的图片异步加载其实就是利用了宏任务先执行，后执行微任务：

new Promise()的时候，Promise新建后就会立即执行

11-利用Promise的图片异步加载 / Promise封装ajax，模拟axios / Promise的finally原理_ajax

 

 利用这一特性，我们可以创建Promise对象的时候，创建image标签，然后再给img标签的 src赋值路径，这样在then的回调函数中，把其加入到盛放显示图片的盒子中，盒子中原来展示是一个缺省图，等到图片加载好了，就显示真正的图片:

 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>

11-利用Promise的图片异步加载 / Promise封装ajax，模拟axios / Promise的finally原理_Promise_02

 

 1秒后显示图片：

11-利用Promise的图片异步加载 / Promise封装ajax，模拟axios / Promise的finally原理_ajax_03

 

 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原理

11-利用Promise的图片异步加载 / Promise封装ajax，模拟axios / Promise的finally原理_ajax_04