await/async 是 ES7 最重要特性之一，它是目前為止 JS 最佳的異步解決方案了。雖然沒有在 ES2016 中錄入，但很快就到來，目前已經(jīng)在 ES-Next Stage 4 階段。

直接上例子，比如我們需要按順序獲取：產(chǎn)品數(shù)據(jù)=>用戶數(shù)據(jù)=>評論數(shù)據(jù)

老朋友 Ajax

傳統(tǒng)的寫法，無需解釋

// 獲取產(chǎn)品數(shù)據(jù) ajax('products.json', (products) => {console.log('AJAX/products >>>', JSON.parse(products));// 獲取用戶數(shù)據(jù)ajax('users.json', (users) => {console.log('AJAX/users >>>', JSON.parse(users));// 獲取評論數(shù)據(jù)ajax('products.json', (comments) => {console.log('AJAX/comments >>>', JSON.parse(comments));});}); });

不算新的朋友 Promise

Promise 已經(jīng)被提及已久了，也是 ES6 的一部分。Promise 能消除 callback hell 帶來的厄運(yùn)金字塔，相比起來代碼更清晰了，但還是達(dá)不到編寫同步代碼的直觀程度。

// Promise // 封裝 Ajax，返回一個 Promise function requestP(url) {return new Promise(function(resolve, reject) {ajax(url, (response) => {resolve(JSON.parse(response));});}); }// 獲取產(chǎn)品數(shù)據(jù) requestP('products.json').then((products) => {console.log('Promises/products >>>', products);// 獲取用戶數(shù)據(jù)return requestP('users.json'); }).then((users) => {console.log('Promises/users >>>', users);// 獲取評論數(shù)據(jù)return requestP('comments.json'); }).then((comments) => {console.log('Promises/comments >>>', comments); });

強(qiáng)勁的新朋友 Generators

Generators 也是 ES6 一個新的特性，能夠 暫停/執(zhí)行 代碼。yield 表示暫停，iterator.next 表示執(zhí)行下一步，如果你不了解 Generators 也沒關(guān)系，可以忽略它直接學(xué)習(xí) await/async。

// Generators function request(url) {ajax(url, (response) => {iterator.next(JSON.parse(response));}); }function *main() {// 獲取產(chǎn)品數(shù)據(jù)let data = yield request('products.json');// 獲取用戶數(shù)據(jù)let users = yield request('users.json');// 獲取評論數(shù)據(jù)let products = yield request('comments.json');console.log('Generator/products >>>', products);console.log('Generator/users >>>', users);console.log('Generator/comments >>>', comments); }var iterator = main(); iterator.next();

碉堡的朋友 await/async

與 Promise 結(jié)合使用

// 封裝 Ajax，返回一個 Promise function requestP(url) {return new Promise(function(resolve, reject) {ajax(url, (response) => {resolve(JSON.parse(response));});}); }(async () => {// 獲取產(chǎn)品數(shù)據(jù)let data = await requestP('products.json');// 獲取用戶數(shù)據(jù)let users = await requestP('users.json');// 獲取評論數(shù)據(jù)let products = await requestP('comments.json');console.log('ES7 Async/products >>>', products);console.log('ES7 Async/users >>>', users);console.log('ES7 Async/comments >>>', comments); }());

與 Fetch API 結(jié)合使用：

(async () => { // Async/await using the fetch APItry {// 獲取產(chǎn)品數(shù)據(jù)let products = await fetch('products.json');// Parsing productslet parsedProducts = await products.json();// 獲取用戶數(shù)據(jù)let users = await fetch('users.json');// Parsing userslet parsedUsers = await users.json();// 獲取評論數(shù)據(jù)let comments = await fetch('comments.json');// Parsing commentslet parsedComments = await comments.json();console.log('ES7 Async+fetch/products >>>', parsedProducts);console.log('ES7 Async+fetch/users >>>', parsedUsers);console.log('ES7 Async+fetch/comments >>>', parsedComments);} catch (error) {console.log(error);} }());

再次結(jié)合 Fetch

(async () => {let parallelDataFetch = await* [(await fetch('products.json')).json(),(await fetch('users.json')).json(),(await fetch('comments.json')).json()];console.log('Async parallel+fetch >>>', parallelDataFetch); }());

使用 await/async 用同步的思維去解決異步的代碼，感覺非常酷非常爽！

參考文獻(xiàn)[原文]：https://github.com/jaydson/es...

總結(jié)

以上是生活随笔為你收集整理的快速理解和使用 ES7 await/async的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

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