ES7的Async/Await的簡單理解

Async/Await 的我的看法

正文：

async，顧名思義，一個異步執行的功能，而 await 則是配合 async 使用的另外一個關鍵字,也是聞字識其意，就是叫你等待啦！

兩者配合食用效果更佳哦，就像德芙配巧克力 ⊙_⊙||

如今其實有點意識的前端或者JS學習者基本都學習了ES6語法了，可是依舊感受在編寫異步代碼上不夠爽怎麼辦，在 ES7 的 async/await 則能使得咱們在編寫異步代碼時變得像同步同樣的方式來編寫，這樣子能夠幫助咱們更直觀的閱讀咱們的額代碼而沒必要在一堆代碼中去尋找這個異步的請求代碼了，咱們將異步執行的代碼封裝了或者做爲模塊導入便可。這樣作不只能夠幫助咱們的代碼提升可閱讀性，採用模塊引入的方式也更利於咱們代碼的後期維護。

async/await 出來其實很早了，15年時就有許多人在社區中開始推廣了，可是爲何我今天才學習了？無法用啊！，以前想要用個新特性要折騰多少事！精力不足啊咱們這種小程序員，又不是哪些大牛們三下五除二解決了工做問題，時間與精力都比咱們多啊。

 

廢話這麼多！好啦，不廢話了，下面是我在互聯網上看過對於 async/await 的介紹後本身的總結：

首先，從別人那得來的 async/await 規則：

1. async 表示這是一個 async 函數，而 await 只能在這個函數裏面使用。

2. await 表示在這裏等待 await 後面的操做執行完畢，再執行下一句代碼。

3. await 後面緊跟着的最好是一個耗時的操做或者是一個異步操做(固然非耗時的操做也能夠的，可是就失去意義了)。

其實在使用 async/await 的時候最簡單的場景就是當你須要執行一個耗時操做時或者必須爲異步操做時就能夠直接上，使用 async 來執行你的函數，在這個函數內部 使用 await 關鍵字來達到異步執行的最終目的：執行完畢（異步執行）了，能夠運行下一行代碼了！

這個時候 JS 代碼就會向下一行進軍了！一個簡單的案例：

 1 let sleep = function (time) {
 2     return new Promise(function (resolve, reject) {
 3         setTimeout(function () {
 4             resolve();
 5         }, time);
 6     })
 7 };
 8 
 9 let howLongToSleep = async function () {
10     // 在這裏使用起來就像同步代碼那樣直觀
11     console.time();
12     console.log('start');
13     await sleep(3000);  //sleep 爲一個執行須要耗費 3s 的函數
14     console.timeEnd('end');
15 };
16 
17 howLongToSleep();

這裏你會發現先是打印出了 start 而後過了約 3s 的時候打印出了 end: 1496124446501.106ms

而在這裏也能夠直接拿到異步函數的返回值，例如上面的 howLongToSleep 函數中的 await sleep(3000) 能夠直接獲取到 sleep函數的返回值，直接用個變來那個保存便可使用了，也很方便的吧。

1 // 在 await 前面用變量保存便可；
2 let result = await sleep(3000);

這裏會等待 sleep 函數完成後並將返回值返回後 await 的工做纔算完成，這時候纔會把的到的返回值賦值給 result 變量，而不是將函數體給了 result， 這點須要清楚。

若是你須要調用多個異步函數而且每隔指定時間執行其中一個的話不妨講他們放到一個數組中執行：

let fnArr = [firstFn, secondFn, thirdFn];  // 數組中存放着須要順序執行的函數

for(let v of fnArr ) {
    console.log(`當前是${v}函數開始執行...`);
    await v( params ); // 調用數組中的每一個函數
}

不過，如今這些功能基本都還只在 node 中才能見到，瀏覽器端對於這些 ES六、ES7 的功能實現仍是存在很大的兼容性問題，使用 babel 卻是能夠實現大部分的代碼功能，可是對於不少前端工做者來講事件比較麻煩的事，可是請堅信總有一天你會來瀏覽器端不須要 babel 也能爽的，因此先會了不壞，正所謂技多不壓身嘛，若是你在學習 node 或者正準備學習 node 的話，請務必會！

 

結語：

之前不寫博客的，都是看別人博客，學着寫博客沒有多久，有什麼問題歡迎各位大佬們穿着女裝來批評在下！本人必定虛心受教；

另外，若是發現本人的發表的博客有抄襲現象，請直接開罵！不要留情，我會在第一時間修改或者刪除的，絕對不污染各位大佬的視野。