Promise/async/await 是ES6里面的新特性 个人理解如下：
1.创建Promise对象后会立即执行内部函数fn new Promise(fn);
1 new Promise(function(resolve, reject){ 2 console('new 完后马上执行这个函数哦'); 3 });
2. Promise 可以通过resolve(r)返回结果 ，then函数接收结果 ，catch函数捕获 throw e 异常， reject(e) 手动触发catch调用
1 function test1(){ 2 return new Promise(function(resolve, reject){ 3 window.setTimeout(function(){ 4 try{ 5 //throw '抛出的异常222'; //这里抛出的异常外部promise不能 直接 catch 到哦 需内部自己捕获后调用 reject 传递到catch 6 7 console.log('test1.....'); 8 resolve('ooookkkk..'); //resolve 向下一个then传递结果 9 10 11 }catch(e){ 12 reject(e); //向catch 传递结果 13 } 14 15 },1000); 16 //throw '抛出的异常111'; //这里抛出的异常能直接被.catch() 捕获到哦 但是会使 setTimeout 里面的 resolve不再调用了哦 17 }).then(function(r){ 18 console.log('调用 resolve 后会执行我哦'); 19 console.log(r); 20 21 }).catch(function(r){ 22 console.log('调用 reject 或throw e后 后会执行我哦'); 23 console.log(r); 24 }); 25 } 26 27 //let res1= test1(); // res1 是 Promise; 28 //console.log(res1);
3.async 关键字修饰函数后 函数的返回值就是Promise对象 如果函数就return a ； 那么Promise对象的result=a；
1 async function test3_(n){ //async return 会封装成 Promise 并把返回值 作为promise的result属性内容\ 2 3 window.setTimeout(function(){ 4 console.log(n); 5 return n+100; 6 },1000); 7 if (n===3){ 8 throw '异常123'; 9 } 10 let a='返回string='+n; 11 return a; //实际返回Promise(result=a); 12 } 13 14 async function test3(){ 15 let a= await test3_(1); //这里的返回值是 函数的实际return 返回值 并不会等待里面的setTimeout完成 16 console.log(a); 17 let b= test3_(2); //这里是 Promise 封装 里面封装了 return 返回值 作为result字段 18 console.log(b); 19 let c= test3_(3).catch(function(r){console.log(r);}); 20 console.log(c); 21 22 let d=new Promise(function(a,b){ 23 console.log('这样也可以直接执行哦'); 24 return 'oookkkk'; //这里的返回意义不大 25 }).then(function(r){ 26 console.log('成功了会执行我哦'); 27 }); 28 29 console.log(d); 30 } 31 //test3();
4.await 必须在async修饰的函数中使用
1 function test6(){ 2 3 } 4 function test7(){ 5 let z=await test6();//这种写法是错误的 因为test6没有返回Promise对象 6 }
5. await fn(); 中 fn 如果返回值不是Promise 对象， 则和普通函数调用无异
1 function test5(){ 2 3 console.log('111111'); 4 window.setTimeout(function(){ 5 console.log('222222'); 6 },1000); 7 return 33333; 8 } 9 async function test5_(){ 10 let a=await test5(); //这个时候和普通调用无异 因为没有返回Promise对象 11 console.log(a); 12 } 13 test5_();
6. await fn(); 中 fn 如果返回Promise 对象 则等待Promise的result产生 后返回
1 function test8(){ 2 return new Promise(function(resolve, reject){ 3 resolve('成功返回'); //如果没有then语句 result='成功返回'; 4 }).then(function(r){ 5 return '这里优先作为结果'; //如果有这个返回 最终result='这里优先作为结果'; 6 }); 7 } 8 9 async function test8_(){ 10 let z= await test8(); //如果 始终不调用 resolve 这里将会一直等待下去 直到获得result 11 console.log(z); 12 console.log('end...'); 13 } 14 15 test8_();
总结await ，async 和Promise 的关系 ：
1. await 必须在 async修饰的函数中调用
2. async 修饰的函数会把结果包装成Promise
3. await 等待的如果不是Promise 和普通调用无异
4.await 会一直等待Promise 的result 出现 并返回result
最后上全部的测试代码:
1 <html> 2 <head> 3 <title>Promise/async/await 理解</title> 4 </head> 5 <body> 6 <script type='text/javascript'> 7 new Promise(function(resolve, reject){ 8 console.log('new 完后马上执行这个函数哦'); 9 }); 10 11 function test1(){ 12 return new Promise(function(resolve, reject){ 13 window.setTimeout(function(){ 14 try{ 15 //throw '抛出的异常222'; //这里抛出的异常外部promise不能 直接 catch 到哦 需内部自己捕获后调用 reject 传递到catch 16 17 console.log('test1.....'); 18 resolve('ooookkkk..'); //resolve 向下一个then传递结果 19 20 21 }catch(e){ 22 reject(e); //向catch 传递结果 23 } 24 25 },1000); 26 //throw '抛出的异常111'; //这里抛出的异常能直接被.catch() 捕获到哦 但是会使 setTimeout 里面的 resolve不再调用了哦 27 }).then(function(r){ 28 console.log('调用 resolve 后会执行我哦'); 29 console.log(r); 30 31 }).catch(function(r){ 32 console.log('调用 reject 或throw e后 后会执行我哦'); 33 console.log(r); 34 }); 35 } 36 37 //let res1= test1(); // res1 是 Promise; 38 //console.log(res1); 39 40 41 42 function test2(n){ 43 return new Promise(function(resolve, reject){ 44 window.setTimeout(function(){ 45 console.log(n); 46 resolve(n+100); 47 },1000); 48 }); 49 //.then(function(r){ 50 // return 99999; 51 //}); 52 } 53 54 async function test2_(){ 55 //这里加上await 后 会等待resolve的结果n+100 或then里面的返回 如果不调用resolve 会一直等待 56 let a= await test2(1); 57 console.log(a); 58 let b= await test2(2); 59 console.log(b); 60 let c= await test2(3); 61 console.log(c); 62 } 63 64 //test2_(); 65 66 67 async function test3_(n){ //async return 会封装成 Promise 并把返回值 作为promise的result属性内容\ 68 69 window.setTimeout(function(){ 70 console.log(n); 71 return n+100; 72 },1000); 73 if (n===3){ 74 throw '异常123'; 75 } 76 let a='返回string='+n; 77 return a; //实际返回Promise(result=a); 78 } 79 80 async function test3(){ 81 let a= await test3_(1); //这里的返回值是 函数的实际return 返回值 并不会等待里面的setTimeout完成 82 console.log(a); 83 let b= test3_(2); //这里是 Promise 封装 里面封装了 return 返回值 作为result字段 84 console.log(b); 85 let c= test3_(3).catch(function(r){console.log(r);}); 86 console.log(c); 87 88 let d=new Promise(function(a,b){ 89 console.log('这样也可以直接执行哦'); 90 return 'oookkkk'; //这里的返回意义不大 91 }).then(function(r){ 92 console.log('成功了会执行我哦'); 93 }); 94 95 console.log(d); 96 } 97 //test3(); 98 99 100 function test4(n){ 101 return new Promise(function(a, b){ 102 window.setTimeout(function(){ 103 a(n+1000); 104 },2000); 105 }); 106 } 107 108 async function test4_(n){ 109 let aa= await test4(n); 110 console.log(aa); 111 return aa; 112 } 113 114 async function test4___(){ 115 let a=test4_(1);//这种调用方式不等待函数内部的异步结果 //返回Promise(result=aa); 如果await调用 则返回aa 116 console.log(a); 117 console.log('test4____'); 118 let b=await test4_(2);//这种调用等待函数内部的具体结果aa 119 } 120 //test4___(); 121 122 123 function test5(){ 124 125 console.log('111111'); 126 window.setTimeout(function(){ 127 console.log('222222'); 128 },1000); 129 return 33333; 130 } 131 async function test5_(){ 132 let a=await test5(); //这个时候和普通调用无异 因为没有返回Promise对象 133 console.log(a); 134 } 135 //test5_(); 136 137 138 function test6(){ 139 140 } 141 function test7(){ 142 //let z=await test6();//这种写法是错误的 因为test6没有返回Promise对象 143 } 144 145 146 function test8(){ 147 return new Promise(function(resolve, reject){ 148 resolve('成功返回'); //如果没有then语句 result='成功返回'; 149 }).then(function(r){ 150 return '这里优先作为结果'; //如果有这个返回 最终result='这里优先作为结果'; 151 }); 152 } 153 154 async function test8_(){ 155 let z= await test8(); //如果 始终不调用 resolve 这里将会一直等待下去 直到获得result 156 console.log(z); 157 console.log('end...'); 158 } 159 160 test8_(); 161 162 </script> 163 </body> 164 </html>
