技術分享——ES2017繼發與並發!

大家都知道,async函數的返回值是 Promise 對象,這比 Generator 函數的返回值是 Iterator 對象方便多了。你可以用then方法指定下一步的操作。

進一步說,async函數完全可以看作多個非同步操作,包裝成的一個 Promise 對象,而await命令就是內部then命令的語法糖。

先來看一段代碼

函數f內部return命令返回的值

會被then方法回調函數接收到

只有async函數內部的非同步操作執行完

才會執行then方法指定的回調函數

wait後面要給個promise對象

也會返回promise對象

需要注意的事

(1)

await命令後面的Promise對象

運行結果可能是rejected

所以最好把await命令放在try...catch代碼塊中

(2)

多個await命令後面的非同步操作

如果不存在繼發關係

最好讓它們同時觸發

(3)

await命令只能用在async函數之中

如果用在普通函數

就會報錯

順序繼發非同步處理

先封裝一個getData的函數

用來ajax讀取數據

並返回promise對象

之後我們需要

分別依次從多個數據文件裡面讀取數據

再依次拼裝到新對象中

有可能數據讀取不到

需要處理錯誤

繼而程序不中斷

或者是用try..catch處理

有時我們希望即使前一個非同步操作失敗

也不要中斷後面的非同步操作

這時可以將第一個await放在try...catch結構裡面

這樣不管這個非同步操作是否成功

第二個await都會執行

並發非同步處理

繼發關係比較耗時

因為只有前一個await完成以後

才會執行後一個await

完全可以讓它們同時觸發

同樣有可能數據讀取不到

需要處理錯誤

繼而程序不中斷


推薦閱讀:

利用css畫出一個三角形
HTML5入門教程之HTML5新特性
大齡電力汪前端學習路(頁面渲染篇)
免費直播 | 2018,你最需要的前端學習指南&求職指南!飢人谷
《Oli-Zhao的前端一萬小時》之:工欲善其事,必先利其器——軟體安裝、環境搭建

TAG:前端入門 | 前端開發入門 |