成人国产在线小视频_日韩寡妇人妻调教在线播放_色成人www永久在线观看_2018国产精品久久_亚洲欧美高清在线30p_亚洲少妇综合一区_黄色在线播放国产_亚洲另类技巧小说校园_国产主播xx日韩_a级毛片在线免费

資訊專欄INFORMATION COLUMN

es6之深入理解promise

luckyw / 3128人閱讀

摘要：形式非必須，也非必須調(diào)用把用函數(shù)表示在調(diào)用的時候用函數(shù)代碼更加同步化三是什么異步操作的終極解決方案寫法四總結(jié)不管用還是用還是用，都保證你寫的的返回值是一個對象

一、promise入門 1. Promise對象是什么 
回調(diào)函數(shù)的另一種原生實現(xiàn)，比之前回調(diào)函數(shù)的寫法機構(gòu)清晰，功能強大，
2.以前回調(diào)這么寫 
function a(fn){
    let h = 1;
    setTimeout(function(){
        if(h==1){
            fn(h)
        }else{
            throw Error("error！")
        }
    },1000)
}
//調(diào)用
a(function(m){
    console.log(m+"callback")
})
3.用Promise 寫回調(diào) 
 function a(){
     return new Promise(function(resole,reject){
         setTimeout(function(){
             if(h==1){
                 resole(h)
             }else{
                 reject(error)
             }
         },1000)
     })
 }
//調(diào)用
a().then(function(data){
    console.log(data)
},function(err){
    console.log(err)
})
4.多層回調(diào)實現(xiàn) 
//函數(shù)封裝
function fn(n,callback){
 setTimeout(function(){
     callback(n)
 },1000)
}
function fn2(m,callback){

   setTimeout(function(){
       callback(m)
   },800)
}
function fn3(h,callback){
    setTimeout(function(){
           callback(h)
   },600)
}
//多層回調(diào)調(diào)用

fn(1, function(n){
                
    console.log("fn="+n);
    fn2(2,function(n2){
        
        console.log("fn2="+n2);
        fn3(3,function(n3){
            
            console.log("fn3="+n3)
            console.log("end")
        })
    })
});

可見(1)中多層回調(diào)寫起來很亂，不利于維護，下面用Promise實現(xiàn)

function pm(n){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            if(n){
                resolve(n)
            }else{
                reject(error)
            }
        },1000)    
    })
}
function pm2(n){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            if(n){
                resolve(n)
            }else{
                reject(error)
            }
        },1000)    
    })
}
function pm3(n){
    return new Promise(function(resolve,reject){
        setTimeout(function(){
            if(n){
                resolve(n)
            }else{
                reject(error)
            }
        },1000)    
    })
}

//調(diào)用
pm(1).then(function(data){
    console.log("pm="+data);
    return pm2(2)
    
}).then(function(data){
    console.log("pm2="+data);
    return pm3(3)
    
}).then(function(data){
    console.log("pm3="+data);
    
})

用promise調(diào)用的寫法更加直觀

二、Generator 1.Generator函數(shù) 
（1）異步編程思想來寫同步代碼
（2）遍歷器生成函數(shù)
（3）狀態(tài)機，封裝了多個內(nèi)部狀態(tài)。
2.形式 
function* abc(){
    //yield 非必須，return 也非必須；
    yield "a";
    yield "b";
    return "c"
}
//調(diào)用
var h = abc();
h.next();//{value:"a",done:false}
h.next();//{value:"b",done:false}
h.next();//{value:"c",done:true}
h.next();//{value:undefined,done:true}
3.把Promise用Generator函數(shù)表示 
function pm(n){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
        console.log(n)
        resolve()
        },1000)    
    })
    
    
    
}
function pm2(n){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
        console.log(n)
         resolve()
        },800)    
    })
}
function pm3(n){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
        console.log(n)
         resolve()
        },600)    
    })
}

function* gPm(){
    yield pm(1);
    yield pm2(2);
    yield pm3(3);
}
let p = gPm();
p.next().value.then(function(){
    p.next().value.then(function(){
        p.next().value.then(function(){
        
        })
    })
})

在調(diào)用的時候用Generator函數(shù)；代碼更加同步化

三、async/await 1. async/await是什么 
（1）異步操作的終極解決方案
2. 寫法 
function pm(n){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
        console.log(n)
        resolve()
        },1000)    
    })
    
    
    
}
function pm2(n){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
        console.log(n)
         resolve()
        },800)    
    })
}
function pm3(n){
    return new Promise((resolve,reject)=>{
        setTimeout(function(){
        console.log(n)
         resolve()
        },600)    
    })
}

async function p(){
    await pm(1)
    await pm2(2)
    await pm3(3)
}
p()
四、總結(jié) 
不管用then還是用generator 還是用async，都保證你寫的function 的返回值是一個promise對象

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://systransis.cn/yun/108192.html

相關(guān)文章

  • ES6-7

    摘要：的翻譯文檔由的維護很多人說，阮老師已經(jīng)有一本關(guān)于的書了入門，覺得看看這本書就足夠了。前端的異步解決方案之和異步編程模式在前端開發(fā)過程中，顯得越來越重要。為了讓編程更美好，我們就需要引入來降低異步編程的復(fù)雜性。 JavaScript Promise 迷你書（中文版） 超詳細介紹promise的gitbook，看完再不會promise...... 本書的目的是以目前還在制定中的ECMASc...

    mudiyouyou 評論0 收藏0

  • JavaScript 異步

    摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復(fù)雜性。寫一個符合規(guī)范并可配合使用的寫一個符合規(guī)范并可配合使用的理解的工作原理采用回調(diào)函數(shù)來處理異步編程。 JavaScript怎么使用循環(huán)代替(異步)遞歸 問題描述 在開發(fā)過程中，遇到一個需求：在系統(tǒng)初始化時通過http獲取一個第三方服務(wù)器端的列表，第三方服務(wù)器提供了一個接口，可通過...

    tuniutech 評論0 收藏0

  • JS筆記

    摘要：從最開始的到封裝后的都在試圖解決異步編程過程中的問題。為了讓編程更美好，我們就需要引入來降低異步編程的復(fù)雜性。異步編程入門的全稱是前端經(jīng)典面試題從輸入到頁面加載發(fā)生了什么這是一篇開發(fā)的科普類文章，涉及到優(yōu)化等多個方面。 TypeScript 入門教程 從 JavaScript 程序員的角度總結(jié)思考，循序漸進的理解 TypeScript。 網(wǎng)絡(luò)基礎(chǔ)知識之 HTTP 協(xié)議 詳細介紹 HTT...

    rottengeek 評論0 收藏0

  • javascript知識點

    摘要：模塊化是隨著前端技術(shù)的發(fā)展，前端代碼爆炸式增長后，工程化所采取的必然措施。目前模塊化的思想分為和。特別指出，事件不等同于異步，回調(diào)也不等同于異步。將會討論安全的類型檢測惰性載入函數(shù)凍結(jié)對象定時器等話題。 Vue.js 前后端同構(gòu)方案之準備篇——代碼優(yōu)化 目前 Vue.js 的火爆不亞于當(dāng)初的 React，本人對寫代碼有潔癖，代碼也是藝術(shù)。此篇是準備篇，工欲善其事，必先利其器。我們先在代...

    Karrdy 評論0 收藏0

  • 深入理解 Javascript 之 對象

    摘要：返回如下仔細分析下面的圖，將會加深你的理解和我們有一個類對象有一個屬性，其指向構(gòu)造器的原型是一個類構(gòu)造器是之后產(chǎn)生的。 擼js基礎(chǔ)之對象 圖例 showImg(https://segmentfault.com/img/remote/1460000015949904?w=768&h=448); 先談?wù)?ECMAScript 中的數(shù)據(jù)類型 ES6 之前 ECMAScript 中有 5 種...

    neroneroffy 評論0 收藏0

發(fā)表評論

0條評論

luckyw

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<