> async和await要搭配Promise使用, 它進一步極大的改進了Promise的寫法 來看一個簡單的場景: ~~~js //假設有4個異步方法要按順序調用 new Promise(function(resolve){ ajaxA("xxxx", ()=> { resolve(); }) }).then(function(){ return new Promise(function(resolve){ ajaxB("xxxx", ()=> { resolve(); }) }) }).then(function(){ return new Promise(function(resolve){ ajaxC("xxxx", ()=> { resolve(); }) }) }).then(function(){ ajaxD("xxxx"); }); ~~~ 語法上不夠簡潔, 我們可以稍微改造一下 ~~~js //將請求改造成一個通用函數 function request(options) { //..... return new Promise(....); //使用Promise執行請求,并返回Promise對象 } //于是我們就可以來發送請求了 request("http://xxxxxx") .then((data)=>{ //處理data }) ~~~ 然后我們再來重新改造開頭的代碼 ~~~js request("ajaxA") .then((data)=>{ //處理data return request("ajaxB") }) .then((data)=>{ //處理data return request("ajaxC") }) .then((data)=>{ //處理data return request("ajaxD") }) ~~~ 比起之前有了不小的進步, 但是看上去依然不夠簡潔 **如果我能像使用同步代碼那樣, 使用Promise就好了** 于是, async \\ await出現了 ~~~js async function load(){ await request("ajaxA"); await request("ajaxB"); await request("ajaxC"); await request("ajaxD"); } await關鍵字使用的要求非常簡單, 后面調用的函數要返回一個Promise對象 load()這個函數已經不再是普通函數, 它出現了await這樣"阻塞式"的操作 因此async關鍵字在這是不能省略的 ~~~ 那么現在看, 這段代碼變得異常清秀 代碼的編寫順序 代碼的閱讀順序 代碼的執行順序 全部都是按照同步的習慣來的 是不是很方便. 到這你已經學會了async和await基本使用方式 下面來簡單解釋一下它的工作流程 ~~~js //wait這個單詞是等待的意思 async function load(){ await request("ajaxA"); //那么這里就是在等待ajaxA請求的完成 await request("ajaxB"); await request("ajaxC"); await request("ajaxD"); } ~~~ 如果后一個請求需要前一個請求的結果怎么辦呢? 傳統的寫法是這樣的 ~~~js request("ajaxA") .then((data1)=>{ return request("ajaxB", data1); }) .then((data2)=>{ return request("ajaxC", data2) }) .then((data3)=>{ return request("ajaxD", data3) }) ~~~ 而使用async/await是這樣的 ~~~js async function load(){ let data1 = await request("ajaxA"); let data2 = await request("ajaxB", data1); let data3 = await request("ajaxC", data2); let data4 = await request("ajaxD", data3); //await不僅等待Promise完成, 而且還拿到了resolve方法的參數 } ~~~ 注意當一個函數被async修飾以后, 它的返回值會被自動處理成Promise對象 關于異常處理 ~~~js async function load(){ //請求失敗后的處理, 可以使用try-catch來進行 try{ let data1 = await request("ajaxA"); let data2 = await request("ajaxB", data1); let data3 = await request("ajaxC", data2); } catch(e){ //...... } } ~~~