promise和generator

js裏的回調地獄是個極其蛋疼的事,promise能夠比較好的解決方法,但他也有缺點,這裏先談他的基本用法。
若是咱們不用promise寫異步操做的時候,假設咱們請求3個文件:ajax

1.txt;
2.txt;
3.txt

在js裏咱們會這麼寫:promise

$.ajax({
                url('./upload/1.txt'),
                success(data) {
                    //do something
                    $.ajax({
                        url('./upload/2.txt'),
                        success(data) {
                            //do something
                            $.ajax({
                                url('./upload/3.txt'),
                                success(data) {
                                    //do something

                                },
                                error(err) {
                                    alert('出錯了')
                                }
                            })
                        },
                        error(err) {
                            alert('出錯了')
                        }
                    })
                },
                error(err) {
                    alert('出錯了')
                }
            })

這也太恐怖了吧
promise解決的其實就是用同步的寫法來寫異步操做
promise裏面有個all方法,裏面放咱們要執行的異步操做,在全部操做完成後調用then方法,這個方法有兩個參數resolve和reject,操做成功和操做失敗。來看例子:異步

Promise.all([
        $({url:'./upload/1.txt'}),
        $({url:'./upload/2.txt'}),
        $({url:'./upload/3.txt'})
    ]).then(resolve=>{
    //do something
    },reject=>{
        alert('出錯了')
    })

全部的異步操做成功會纔會調用resolve,不然就調用reject。這個寫法就舒服多了。
generator函數簡單的來講就是能夠暫停目前在執行的函數,去執行其餘的代碼,何時你想繼續執行了繼續來調用就能夠繼續來執行了。
建立一個generator函數:函數

function *show(){
    //this is a generator function
}

沒錯,就是在函數名稱前加了個*號,這裏面有一個yeild值得咱們來講說。
在建立完generator函數以後,咱們須要來執行他,和普通函數的執行不一樣,generator函數是這樣執行的:this

function *show(){
 alert('do something');
 yeild;
 alert('continue');
}

let g1=show();
g1.next()//do something
alert('do other');//do other
g1.next()//continue

函數裏面出現了一個yield,這個就是咱們從開始執行到暫停的地方,調用g1.next()就執行到這裏,而後程序就從第一個g1.next()處開始執行alert('do other');執行完以後咱們在調用g1.next()就又回到show函數中從yeild處開始往下執行。
其中yeild還能夠傳參數:url

function *show(){
 alert('do something');
 yeild 5;
}
let a=g1.next();//a=5

也能夠傳參數進去:code

function *show(){
 alert('do something');
 let a=yeild;
 alert(a)//6
}
g1.next();//do something
g1.next(6)
相關文章
相關標籤/搜索