1、回調(diào)函數(shù)(callback)

setTimeout(() => { // callback 函數(shù)體 })復(fù)制代碼

缺點(diǎn)：回調(diào)地獄，不能用try catch捕獲錯(cuò)誤，不能return

回調(diào)地獄的根本問(wèn)題在于：

• 缺乏順序性：回調(diào)地獄導(dǎo)致的調(diào)試?yán)щy，和大腦的思維方式不符
• 嵌套函數(shù)存在耦合性，一旦有所改動(dòng)，就會(huì)牽一發(fā)而動(dòng)全身，即（控制反轉(zhuǎn)）
• 嵌套函數(shù)過(guò)多的話(huà)，很難處理錯(cuò)誤

ajax('XXX1', () => {// callback 函數(shù)體ajax('XXX2', () => {// callback 函數(shù)體ajax('XXX3', () => {// callback 函數(shù)體})}) })復(fù)制代碼

優(yōu)點(diǎn)：解決了同步的問(wèn)題（只要有一個(gè)任務(wù)耗時(shí)很長(zhǎng)，后面的任務(wù)都必須排隊(duì)等著，會(huì)拖延整個(gè)程序的執(zhí)行）

2、Promise

Promise就是為了就覺(jué)callback的問(wèn)題而產(chǎn)生的。

Promise實(shí)現(xiàn)了鏈?zhǔn)秸{(diào)用，也就是說(shuō)每次then后返回的都是一個(gè)全新Promise，如果我們?cè)趖hen中return，return的結(jié)果會(huì)被Promise.resolve()包裝

優(yōu)點(diǎn)：解決了回調(diào)地獄的問(wèn)題

ajax('XXX1').then(res => {// 操作邏輯return ajax('XXX2')}).then(res => {// 操作邏輯return ajax('XXX3')}).then(res => {// 操作邏輯})復(fù)制代碼

缺點(diǎn)：無(wú)法取消Promise，錯(cuò)誤需要通過(guò)回調(diào)函數(shù)來(lái)捕獲

3、Generator

特點(diǎn)：可以控制函數(shù)的執(zhí)行，可以配合co函數(shù)庫(kù)使用

function *fetch() {yield ajax('XXX1', () => {})yield ajax('XXX2', () => {})yield ajax('XXX3', () => {}) } let it = fetch() let result1 = it.next() let result2 = it.next() let result3 = it.next()復(fù)制代碼

4、Async/await

async、await是異步的終極解決方案

優(yōu)點(diǎn)是：代碼清晰，不用像Promise寫(xiě)一大堆then鏈，處理了回調(diào)地獄的問(wèn)題

缺點(diǎn)：await將異步代碼改造成同步代碼，如果多個(gè)異步操作沒(méi)有依賴(lài)性而使用await會(huì)導(dǎo)致性能上的降低。

async function test() {// 以下代碼沒(méi)有依賴(lài)性的話(huà)，完全可以使用 Promise.all 的方式// 如果有依賴(lài)性的話(huà)，其實(shí)就是解決回調(diào)地獄的例子了await fetch('XXX1')await fetch('XXX2')await fetch('XXX3') }復(fù)制代碼

下面來(lái)看一個(gè)使用await的例子：

let a = 0 let b = async () => {a = a + await 10console.log('2', a) // -> '2' 10 } b() a++ console.log('1', a) // -> '1' 1復(fù)制代碼

對(duì)于以上代碼你可能會(huì)有疑惑，讓我來(lái)解釋下原因

• 首先函數(shù)b先執(zhí)行，在執(zhí)行到await 10之前變量 a 還是0，因?yàn)?await 內(nèi)部實(shí)現(xiàn)了generator，generator 會(huì)保留堆棧中東西，所以這時(shí)候 a = 0 被保存了下來(lái)
• 因?yàn)閍wait 是異步操作，后來(lái)的表達(dá)式不返回 Promise 的話(huà)，就會(huì)包裝成 Promise.resolve(返回值)，然后會(huì)去執(zhí)行函數(shù)外的同步代碼
• 同步代碼執(zhí)行完畢后開(kāi)始執(zhí)行異步代碼，將保存下來(lái)的值拿出來(lái)適用，這時(shí)候 a = 0 + 10

上述解釋中提到了await 內(nèi)部實(shí)現(xiàn)了 generator ，其實(shí) await 就是 generator 加上 Promise 的語(yǔ)法糖，且內(nèi)部實(shí)現(xiàn)了自動(dòng)執(zhí)行g(shù)enerator。詳情可參考然阮一峰的ES6?es6.ruanyifeng.com/#docs/array

轉(zhuǎn)載于:https://juejin.im/post/5d40efc96fb9a06ae94d0dc5

總結(jié)

以上是生活随笔為你收集整理的记录：JS异步解决方案的发展以及优缺点的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。