• es6(13)--Promise


      1 //Promise
      2 
      3 {
      4     //原始方法
      5     let ajax=function(callback){
      6         console.log('执行')
      7         setTimeout(function(){
      8             callback&&callback.call()
      9         },1000)
     10     }
     11     ajax(function(){
     12         console.log('timeout1')
     13     })
     14 }
     15 {
     16     //使用Promise
     17     let ajax=function(){
     18         console.log('执行2')
     19         //new Promise(function(resolve,reject){})
     20             //resolve:要执行下一步的操作
     21             //reject:要中断当前的操作
     22         return new Promise(function(resolve,reject){
     23             setTimeout(function(){
     24                 resolve();
     25             },1000)
     26         })
     27     }
     28     ajax().then(function(){
     29         console.log('Promise','timeout2')
     30     })
     31 }
     32 {
     33     //使用Promise
     34     let ajax=function(){
     35         console.log('执行3')
     36         return new Promise(function(resolve,reject){
     37             setTimeout(function(){
     38                 resolve();
     39             },1000)
     40         })
     41     };
     42     ajax()
     43     .then(function(){
     44         return new Promise(function(resolve,reject){
     45             setTimeout(function(){
     46                 resolve();
     47             },2000)
     48         })
     49     }).
     50     then(function(){
     51         console.log('timeout3')
     52     })
     53 }
     54 {
     55     let ajax=function(num){
     56         console.log('执行4');
     57         return new Promise(function(resolve,reject){
     58             if(num>5){
     59                 resolve();
     60             }else{
     61                 throw new Error('出错了')
     62             }
     63         })
     64     }
     65     ajax(3).then(function(){
     66         console.log('log',6);
     67     }).catch(function(err){
     68         console.log(err)
     69     })
     70 }
     71 {
     72 //所有图片加载完了再添加到页面
     73     function loadImg(src){
     74         return new Promise((resolve,reject)=>{
     75             let img=document.createElement('img');
     76             img.src=src;
     77             img.onload=function(){
     78                 resolve(img);
     79             }
     80             img.onerror=function(err){
     81                 reject(err);
     82             }
     83         })
     84     }
     85     function showImgs(imgs){
     86         imgs.forEach(function(img){
     87             document.body.appendChild(img);
     88         })
     89     }
     90     //Promise.all把多个promise实例变成一个实例
     91     Promise.all([
     92         loadImg('..'),
     93         loadImg('..'),
     94         loadImg('..'),
     95     ]).then(showImgs)
     96 }
     97 {
     98 //有一个图片加载完就添加到页面上
     99     function loadImg(src){
    100         return new Promise((resolve,reject)=>{
    101             let img=document.createElement('img');
    102             img.src=src;
    103             img.onload=function(){
    104                 resolve(img);
    105             }
    106             img.onerror=function(err){
    107                 reject(err);
    108             }
    109         })
    110     }
    111     function showImas(img){
    112         let p=document.createElement('p');
    113         p.appendChild(img);
    114         document.body.appendChild(p);
    115     }
    116     //有一个实例发生改变就先加载
    117     Promise.rase([
    118         loadImg('..'),
    119         loadImg('..'),
    120         loadImg('..'),
    121     ]).then(showImgs)
    122 }
  • 相关阅读:
    每日日报1
    shazidouhui的使用体验
    水滴的使用体验
    麻雀记的使用体验
    钢镚儿的使用体验
    TD课程通的使用体验
    01 fs模块
    0 mysql 安装
    slot
    vue引入 lodash
  • 原文地址:https://www.cnblogs.com/chenlw/p/9227918.html
Copyright © 2020-2023  润新知