es6之深入理解promise

luckyw 發布于2019-08-26 12:11 / 3131人閱讀

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

一、promise入門 1. Promise對象是什么

回調函數的另一種原生實現，比之前回調函數的寫法機構清晰，功能強大，

2.以前回調這么寫

function a(fn){
    let h = 1;
    setTimeout(function(){
        if(h==1){
            fn(h)
        }else{
            throw Error("error！")
        }
    },1000)
}
//調用
a(function(m){
    console.log(m+"callback")
})

3.用Promise 寫回調

 function a(){
     return new Promise(function(resole,reject){
         setTimeout(function(){
             if(h==1){
                 resole(h)
             }else{
                 reject(error)
             }
         },1000)
     })
 }
//調用
a().then(function(data){
    console.log(data)
},function(err){
    console.log(err)
})

4.多層回調實現

//函數封裝
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)
}
//多層回調調用

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)中多層回調寫起來很亂，不利于維護，下面用Promise實現

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)    
    })
}

//調用
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調用的寫法更加直觀

二、Generator 1.Generator函數

（1）異步編程思想來寫同步代碼
（2）遍歷器生成函數
（3）狀態機，封裝了多個內部狀態。

2.形式

function* abc(){
    //yield 非必須，return 也非必須；
    yield "a";
    yield "b";
    return "c"
}
//調用
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函數表示

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(){
        
        })
    })
})

在調用的時候用Generator函數；代碼更加同步化

三、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()

四、總結

不管用then還是用generator 還是用async，都保證你寫的function 的返回值是一個promise對象

GPU云服務器云服務器深入理解webrtc之aec es6中的promise 深入理解系列深入理解linux

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/108192.html

ES6-7

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

mudiyouyou 2019-08-21 18:40 評論0 收藏0
JavaScript 異步

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

tuniutech 2019-08-21 18:34 評論0 收藏0
JS筆記

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

rottengeek 2019-08-22 13:58 評論0 收藏0
javascript知識點

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

Karrdy 2019-08-26 11:34 評論0 收藏0
深入理解 Javascript 之對象

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

neroneroffy 2019-08-23 10:52 評論0 收藏0