await/async 是 ES7 最重要特性之一，它是目前為止 JS 最佳的異步解決方案了。雖然沒有在 ES2016 中錄入，但很快就到來，目前已經在 ES-Next Stage 4 階段。
直接上例子，比如我們需要按順序獲取：產品數據=>用戶數據=>評論數據
老朋友 Ajax
傳統的寫法，無需解釋
// 獲取產品數據ajax('products.json', (products) => {console.log('AJAX/products >>>', JSON.parse(products));// 獲取用戶數據ajax('users.json', (users) => {console.log('AJAX/users >>>', JSON.parse(users));// 獲取評論數據ajax('products.json', (comments) => {console.log('AJAX/comments >>>', JSON.parse(comments));});});});不算新的朋友 Promise
Promise 已經被提及已久了，也是 ES6 的一部分。Promise 能消除 callback hell 帶來的厄運金字塔，相比起來代碼更清晰了。
// Promise// 封裝 Ajax，返回一個 Promisefunction requestP(url) {return new Promise(function(resolve, reject) {ajax(url, (response) => {resolve(JSON.parse(response));});});}// 獲取產品數據requestP('products.json').then(function(products){console.log('Promises/products >>>', products);});// 獲取用戶數據requestP('users.json').then(function(users){console.log('Promises/users >>>', users);});// 獲取評論數據requestP('comments.json').then(function(comments){console.log('Promises/comments >>>', comments);});當然使用Promise.all 可以更簡潔
Promise.all([requestP('products.json'),requestP('users.json'),requestP('comments.json')]).then(function(data) {console.log('Parallel promises >>>', data);});強勁的新朋友 Generators
Generators 也是 ES6 一個新的特性，能夠 暫停/執行 代碼。yield 表示暫停，iterator.next 表示執行下一步，如果你不了解 Generators 也沒關系，可以忽略它直接學習 await/async。
// Generatorsfunction request(url) {ajax(url, (response) => {iterator.next(JSON.parse(response));});}function *main() {// 獲取產品數據let data = yield request('products.json');// 獲取用戶數據let users = yield request('users.json');// 獲取評論數據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 結合使用
// 封裝 Ajax，返回一個 Promisefunction requestP(url) {return new Promise(function(resolve, reject) {ajax(url, (response) => {resolve(JSON.parse(response));});});}(async () => {// 獲取產品數據let data = await requestP('products.json');// 獲取用戶數據let users = await requestP('users.json');// 獲取評論數據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 結合使用：
(async () => {// Async/await using the fetch APItry {// 獲取產品數據let products = await fetch('products.json');// Parsing productslet parsedProducts = await products.json();// 獲取用戶數據let users = await fetch('users.json');// Parsing userslet parsedUsers = await users.json();// 獲取評論數據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);}}());按數組順序執行
(async () => {let parallelData = await* [requestP('products.json'),requestP('users.json'),requestP('comments.json')];console.log('Async parallel >>>', parallelData);}());再次結合 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 用同步的思維去解決異步的代碼，感覺非常酷非常爽！關于js中的await/async的作用和用法就給大家介紹這么多，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對武林網網站的支持！
新聞熱點
疑難解答
