ES6 - Promise对象，异步操作
1、介绍Promise对象
A：对象的转态不会受外界的影响，代表了一个异步操作，有3中状态：Pending(进行中)、Resolved(已完成)、Rejected(已失败)，只有异步操作的结果可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
B：状态改变之后就不会再改变，任何时候都可以得到这个结果。转态改变情况：Pending到Resolved、Pending到Rejected。只要其中一个发生，状态凝固，不会再变，会一直保持这个结果，就算改变已经发生，你给对象添加回调函数，也会立即得到这个结果，与事件是完全不同的，事件的特点是，如果你错过了，再去监听是得不到结果的。
C：无法取消Promise，一旦新建就会立即执行，无法中途取消。如果不设置回调函数，内部抛出的错误不会反映到外部。
2、example：
异步加载，在图片加载完成之后执行某些函数：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>promise对象练习</title> 5 <meta charset="utf-8"> 6 </head> 7 <body> 8 <div> 9 <img src="" id="img"> 10 </div> 11 12 <script src="https://cdn.jsdelivr.net/bluebird/3.5.0/bluebird.js"></script> 13 <script type="text/javascript"> 14 //example -- 图片加载 15 var imgArr = [ 16 "http://hyimage.uulian.com/hy/20170222/0f01be5deb88a466f0fa7f84889329a9.jpg@!middle1", 17 "http://hyimage.uulian.com/hy/20170215/2605c0952e3ab67eac52d4d9a7a81c08.jpg@!middle1", 18 "http://hyimage.uulian.com/hy/20170203/29930ba76a2ecda499e2547cad2df9ee.jpg@!middle1" 19 ]; 20 21 //一张图片加载完成之后要执行某个函数 22 function loadImgAsync(url){ 23 return new Promise((resolve,reject) => { 24 var image = new Image(); 25 26 image.onload = function(){ 27 resolve(image); 28 } 29 30 image.onerror = function(){ 31 reject(new Error('could not load image at'+ulr)); 32 } 33 34 image.src = url; 35 }) 36 } 37 38 loadImgAsync(imgArr[0]).then(()=>{ 39 var img = document.getElementById('img'); 40 img.setAttribute('src',imgArr[0]); 41 }) 42 </script> 43 </body> 44 </html>
模拟ajax请求，成功后会返回一个json数据
1 //模拟ajax 2 var getJSON = function(url) { 3 var promise = new Promise((resolve, reject) => { 4 5 var client = new XMLHttpRequest(); 6 client.open("GET", url); 7 client.onreadystatechange = handler; 8 client.responseType = "json"; 9 client.setRequestHeader("Accept", "application/json"); 10 client.send(); 11 12 function handler() { 13 if (this.readyState !== 4) { 14 return; 15 } 16 17 if (this.status === 200) { 18 resolve(this.response); 19 } else { 20 reject(new Error(this.statusText)); 21 } 22 }; 23 }); 24 25 return promise; 26 }; 27 28 getJSON("/posts.json").then(function(json) { 29 console.log('Contents: ' + json); 30 }, function(error) { 31 console.error('出错了', error); 32 });
3、api
A:Promise.resolve()
B:Promise.reject()
C:Promise.prototype.then()
D:Promise.prototype.catch()
E:Promise.all()
F:Promise.race()
---------------------------------------------------------------------------------------------------
Promise.all()的使用：
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <title>promise对象练习</title> 5 <meta charset="utf-8"> 6 </head> 7 <body> 8 <div> 9 <img src="" class="img"> 10 <img src="" class="img"> 11 <img src="" class="img"> 12 </div> 13 14 <script src="https://cdn.jsdelivr.net/bluebird/3.5.0/bluebird.js"></script> 15 <script type="text/javascript"> 16 //example -- 图片加载 17 var imgArr = [ 18 "http://hyimage.uulian.com/hy/20170222/0f01be5deb88a466f0fa7f84889329a9.jpg@!middle1", 19 "http://hyimage.uulian.com/hy/20170215/2605c0952e3ab67eac52d4d9a7a81c08.jpg@!middle1", 20 "http://hyimage.uulian.com/hy/20170203/29930ba76a2ecda499e2547cad2df9ee.jpg@!middle1" 21 ]; 22 23 //一张图片加载完成之后要执行某个函数 24 function loadImgAsync(url){ 25 return new Promise((resolve,reject) => { 26 var image = new Image(); 27 28 image.onload = function(){ 29 resolve(image); 30 } 31 32 image.onerror = function(){ 33 reject(new Error('could not load image at'+ulr)); 34 } 35 36 image.src = url; 37 }) 38 } 39 40 Promise.all([loadImgAsync(imgArr[0]),loadImgAsync(imgArr[1]),loadImgAsync(imgArr[2])]).then(()=>{ 41 var img = document.getElementsByTagName('img'); 42 43 for(var i = 0 , j = img.length; i < j;i++){ 44 img[i].setAttribute('src',imgArr[i]); 45 } 46 }) 47 </script> 48 </body> 49 </html>
