Promise、Generator和Async的差異是什么

本篇內容主要講解“Promise、Generator和Async的差異是什么”，感興趣的朋友不妨來看看。本文介紹的方法操作簡單快捷，實用性強。下面就讓小編來帶大家學習“Promise、Generator和Async的差異是什么”吧!

我們知道Promise與Async/await函數都是用來解決JavaScript中的異步問題的，從最開始的回調函數處理異步，到Promise處理異步，到Generator處理異步，再到Async/await處理異步，每一次的技術更新都使得JavaScript處理異步的方式更加優雅，從目前來看，Async/await被認為是異步處理的終極解決方案，讓JS的異步處理越來越像同步任務。異步編程的最高境界，就是根本不用關心它是不是異步。

異步解決方案的發展歷程

1.回調函數

從早期的Javascript代碼來看，在ES6誕生之前，基本上所有的異步處理都是基于回調函數函數實現的，你們可能會見過下面這種代碼：

ajax('aaa', () => {
    // callback 函數體
    ajax('bbb', () => {
        // callback 函數體
        ajax('ccc', () => {
            // callback 函數體
        })
    })
})

沒錯，在ES6出現之前，這種代碼可以說是隨處可見。它雖然解決了異步執行的問題，可隨之而來的是我們常聽說的回調地獄問題：

• 沒有順序可言：嵌套函數執行帶來的是調試困難，不利于維護與閱讀

• 耦合性太強：一旦某一個嵌套層級有改動，就會影響整個回調的執行

所以，為了解決這個問題，社區最早提出和實現了Promise，ES6將其寫進了語言標準，統一了用法。

2.Promise

Promise 是異步編程的一種解決方案，比傳統的解決方案——回調函數和事件——更合理和更強大。它就是為了解決回調函數產生的問題而誕生的。

有了Promise對象，就可以將異步操作以同步操作的流程表達出來，避免了層層嵌套的回調函數。此外，Promise對象提供統一的接口，使得控制異步操作更加容易。

所以上面那種回調函數的方式我們可以改成這樣：(前提是ajax已用Promise包裝)

ajax('aaa').then(res=>{
  return ajax('bbb')
}).then(res=>{
  return ajax('ccc')
})

通過使用Promise來處理異步，比以往的回調函數看起來更加清晰了，解決了回調地獄的問題，Promise的then的鏈式調用更能讓人接受，也符合我們同步的思想。

但Promise也有它的缺點：

• Promise的內部錯誤使用try catch捕獲不到，只能只用then的第二個回調或catch來捕獲

let pro
try{
    pro = new Promise((resolve,reject) => {
        throw Error('err....')
    })
}catch(err){
    console.log('catch',err) // 不會打印
}
pro.catch(err=>{
    console.log('promise',err) // 會打印
})

• Promise一旦新建就會立即執行，無法取消

之前寫過一篇，講解了Promise如何使用以及內部實現原理。對Promise還不太理解的同學可以看看～

從如何使用到如何實現一個Promise

https://juejin.cn/post/7051364317119119396

3.Generator

Generator 函數是 ES6 提供的一種異步編程解決方案，語法行為與傳統函數完全不同。Generator 函數將 JavaScript 異步編程帶入了一個全新的階段。

聲明

與函數聲明類似，不同的是function關鍵字與函數名之間有一個星號，以及函數體內部使用yield表達式，定義不同的內部狀態（yield在英語里的意思就是“產出”）。

function* gen(x){
 const y = yield x + 6;
 return y;
}
// yield 如果用在另外一個表達式中,要放在()里面
// 像上面如果是在=右邊就不用加()
function* genOne(x){
  const y = `這是第一個 yield 執行:${yield x + 1}`;
 return y;
}

執行

const g = gen(1);
//執行 Generator 會返回一個Object,而不是像普通函數返回return 后面的值
g.next() // { value: 7, done: false }
//調用指針的 next 方法,會從函數的頭部或上一次停下來的地方開始執行，直到遇到下一個 yield 表達式或return語句暫停,也就是執行yield 這一行
// 執行完成會返回一個 Object,
// value 就是執行 yield 后面的值,done 表示函數是否執行完畢
g.next() // { value: undefined, done: true }
// 因為最后一行 return y 被執行完成,所以done 為 true

調用 Generator 函數后，該函數并不執行，返回的也不是函數運行結果，而是一個指向內部狀態的指針對象，也就是遍歷器對象（Iterator Object）。下一步，必須調用遍歷器對象的next方法，使得指針移向下一個狀態。

所以上面的回調函數又可以寫成這樣：

function *fetch() {
    yield ajax('aaa')
    yield ajax('bbb')
    yield ajax('ccc')
}
let gen = fetch()
let res1 = gen.next() // { value: 'aaa', done: false }
let res2 = gen.next() // { value: 'bbb', done: false }
let res3 = gen.next() // { value: 'ccc', done: false }
let res4 = gen.next() // { value: undefined, done: true } done為true表示執行結束

由于 Generator 函數返回的遍歷器對象，只有調用next方法才會遍歷下一個內部狀態，所以其實提供了一種可以暫停執行的函數。yield表達式就是暫停標志。

遍歷器對象的next方法的運行邏輯如下。

（1）遇到yield表達式，就暫停執行后面的操作，并將緊跟在yield后面的那個表達式的值，作為返回的對象的value屬性值。

（2）下一次調用next方法時，再繼續往下執行，直到遇到下一個yield表達式。

（3）如果沒有再遇到新的yield表達式，就一直運行到函數結束，直到return語句為止，并將return語句后面的表達式的值，作為返回的對象的value屬性值。

（4）如果該函數沒有return語句，則返回的對象的value屬性值為undefined。

yield表達式本身沒有返回值，或者說總是返回undefined。next方法可以帶一個參數，該參數就會被當作上一個yield表達式的返回值。

怎么理解這句話？我們來看下面這個例子：

function* foo(x) {
  var y = 2 * (yield (x + 1));
  var z = yield (y / 3);
  return (x + y + z);
}

var a = foo(5);
a.next() // Object{value:6, done:false}
a.next() // Object{value:NaN, done:false}
a.next() // Object{value:NaN, done:true}

var b = foo(5);
b.next() // { value:6, done:false }
b.next(12) // { value:8, done:false }
b.next(13) // { value:42, done:true }

由于yield沒有返回值，所以（yield（x+1））執行后的值是undefined，所以在第二次執行a.next()是其實是執行的2*undefined，所以值是NaN，所以下面b的例子中，第二次執行b.next()時傳入了12，它會當成第一次b.next()的執行返回值，所以b的例子中能夠正確計算。這里不能把next執行結果中的value值與yield返回值搞混了，它兩不是一個東西

yield與return的區別

相同點:

• 都能返回語句后面的那個表達式的值

• 都可以暫停函數執行

區別:

• 一個函數可以有多個 yield,但是只能有一個 return

• yield 有位置記憶功能,return 沒有

4.Async/await

Async/await其實就是上面Generator的語法糖，async函數其實就相當于funciton *的作用，而await就相當與yield的作用。而在async/await機制中，自動包含了我們上述封裝出來的spawn自動執行函數。

所以上面的回調函數又可以寫的更加簡潔了：

async function fetch() {
  	await ajax('aaa')
    await ajax('bbb')
    await ajax('ccc')
}
// 但這是在這三個請求有相互依賴的前提下可以這么寫，不然會產生性能問題，因為你每一個請求都需要等待上一次請求完成后再發起請求，如果沒有相互依賴的情況下，建議讓它們同時發起請求，這里可以使用Promise.all()來處理

async函數對Generator函數的改進，體現在以下四點：

• 內置執行器：async函數執行與普通函數一樣，不像Generator函數，需要調用next方法，或使用co模塊才能真正執行

• 語意化更清晰：async和await，比起星號和yield，語義更清楚了。async表示函數里有異步操作，await表示緊跟在后面的表達式需要等待結果。

• 適用性更廣：co模塊約定，yield命令后面只能是 Thunk 函數或 Promise 對象，而async函數的await命令后面，可以是 Promise 對象和原始類型的值（數值、字符串和布爾值，但這時會自動轉成立即 resolved 的 Promise 對象）。

• 返回值是Promise：async函數的返回值是 Promise 對象，這比 Generator 函數的返回值是 Iterator 對象方便多了。你可以用then方法指定下一步的操作。

async函數

async函數的返回值為Promise對象，所以它可以調用then方法

async function fn() {
  return 'async'
}
fn().then(res => {
  console.log(res) // 'async'
})

await表達式

await 右側的表達式一般為 promise 對象, 但也可以是其它的值

• 如果表達式是 promise 對象, await 返回的是 promise 成功的值

• 如果表達式是其它值, 直接將此值作為 await 的返回值

• await后面是Promise對象會阻塞后面的代碼，Promise 對象 resolve，然后得到 resolve 的值，作為 await 表達式的運算結果

• 所以這就是await必須用在async的原因，async剛好返回一個Promise對象，可以異步執行阻塞

function fn() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve(1000)
        }, 1000);
    })
}
function fn1() { return 'nanjiu' }
async function fn2() {
    // const value = await fn() // await 右側表達式為Promise，得到的結果就是Promise成功的value
    // const value = await '南玖'
    const value = await fn1()
    console.log('value', value)
}
fn2() // value 'nanjiu'

異步方案比較

后三種方案都是為解決傳統的回調函數而提出的，所以它們相對于回調函數的優勢不言而喻。而async/await又是Generator函數的語法糖。

• Promise的內部錯誤使用try catch捕獲不到，只能只用then的第二個回調或catch來捕獲，而async/await的錯誤可以用try catch捕獲

• Promise一旦新建就會立即執行，不會阻塞后面的代碼，而async函數中await后面是Promise對象會阻塞后面的代碼。

• async函數會隱式地返回一個promise，該promise的reosolve值就是函數return的值。

• 使用async函數可以讓代碼更加簡潔，不需要像Promise一樣需要調用then方法來獲取返回值，不需要寫匿名函數處理Promise的resolve值，也不需要定義多余的data變量，還避免了嵌套代碼。

說了這么多，順便看個題吧～

console.log('script start')
async function async1() {
    await async2()
    console.log('async1 end')
}
async function async2() {
    console.log('async2 end')
}
async1()

setTimeout(function() {
    console.log('setTimeout')
}, 0)

new Promise(resolve => {
    console.log('Promise')
    resolve()
})
.then(function() {
    console.log('promise1')
})
.then(function() {
    console.log('promise2')
})
console.log('script end')

解析：

打印順序應該是： script start -> async2 end -> Promise -> script end -> async1 end -> promise1 -> promise2 -> setTimeout

老規矩，全局代碼自上而下執行，先打印出script start，然后執行async1(),里面先遇到await async2(),執行async2,打印出async2 end，然后await后面的代碼放入微任務隊列，接著往下執行new Promise，打印出Promise,遇見了resolve，將第一個then方法放入微任務隊列，接著往下執行打印出script end，全局代碼執行完了，然后從微任務隊列中取出第一個微任務執行，打印出async1 end,再取出第二個微任務執行，打印出promise1,然后這個then方法執行完了，當前Promise的狀態為fulfilled,它也可以出發then的回調，所以第二個then這時候又被加進了微任務隊列，然后再出微任務隊列中取出這個微任務執行，打印出promise2,此時微任務隊列為空，接著執行宏任務隊列，打印出setTimeout。

解題技巧：

• 無論是then還是catch里的回調內容只要代碼正常執行或者正常返回，則當前新的Promise實例為fulfilled狀態。如果有報錯或返回Promise.reject()則新的Promise實例為rejected狀態。

• fulfilled狀態能夠觸發then回調

• rejected狀態能夠觸發catch回調

• 執行async函數，返回的是Promise對象

• await相當于Promise的then并且同一作用域下await下面的內容全部作為then中回調的內容

• 異步中先執行微任務，再執行宏任務

到此，相信大家對“Promise、Generator和Async的差異是什么”有了更深的了解，不妨來實際操作一番吧！這里是億速云網站，更多相關內容可以進入相關頻道進行查詢，關注我們，繼續學習！