JAVAScript異步請求(Callback、Promise、Async/Await、G
異步請求在當今的前端江湖里重要非凡,可以毫無疑問地說,正是異步請求給JavaScript開啟了無限的使用場景。下面將介紹在JavaScript中實現異步請求的常見四種方式,即回調函數(Callback),Promise,Async/Await和生成器(Generator)。
一、回調函數(Callback)
回調函數可以說是最簡單易懂的,我們無論是使用JQuery或VUE、React這些框架,回調函數都無時不在。回調函數是很多常見請求類庫異步請求后默認調用方法。
下面看下實現方式。
使用Callback異步請求
對于使用回調函數作異步請求,無限過多解釋,請求成功和回調各有回調,各自處理業務邏輯或錯誤?;卣{函數作異步請求的弊端在于,如果應用業務比較復雜,那么異步請求可能需要多層嵌套,影響代碼可讀性和可維護性,即常規說的“回調地獄”(Callback Hell)。
二、Promise
JavaScript的Promise使用越來越廣,它是通過初始化Promise對象,來返回一個“異步承諾”,不管是請求成功或出錯都會執行,初始化的promise實例帶有resolve和reject方法,可以對上面的請求結果進行分開處理,一般來說,請求成功的情況下resolve數據,請求失敗的情況下reject錯誤信息。但這并不是絕對的,什么時候resolve或reject完全取決于我們,這就給我們帶來很大的便利性,我們可以將業務邏輯也考慮進去,從而在不同的使用場景下靈活使用resove和reject。下面看下使用Promise進行異步請求的示例。
Promise的另一個很大便利之處就是,針對多個異步請求的情況,可以使用Promise.all方法來確保各個請求的執行返回,避免了“回調地獄”(Callback Hell)。
下面看下實現方式。
使用Promise異步請求
三、Async/Await
雖然Promise很便利了,但不可否認的是使用Promise來定義異步請求,在實現代碼簡潔性方面還是稍差一點,因此就有了Async/Await,多個請求情況下更是可以“鏈式”聲明,可以大大節省代碼量。
下面看下實現方式。
使用Async/Await異步請求
當然,使用Async/Await也是有一定弊端的,比如在錯誤處理方法需要處理,特別是多個請求的情況,異步處理稍微麻煩一點,一般是使用try…catch去捕獲請求異步。
四、生成器(Generator)
生成器函數(Generator)是ES2015新增的特性,生成器函數具有異步特性,使用生成器作異步請求也正是利用它的異步特性來實現的。
在定義一個生成器函數時,其中的每一個yield操作都是異步的,后面的yield會等待前面的yield操作完成,也可以獲取前面yield完成的數據供當前使用。
下面看下實現方式。
使用Generator作異步請求
以上就是JavaScript中用于異步請求的四種常見方式(Callback, Promise, Async/Await,Generator),個人認為,Promise和Async/Await的使用場景和操作性較好,是必須掌握的,在實際開發中也用得最多。
各位大神們,你們覺得呢?