JavaScript中的await/async的作用和用法

更新時間：2016年10月31日 11:13:51 投稿：mrr

await/async 是 ES7 最重要特性之一，它是目前為止 JS 最佳的異步解決方案了。這篇文章主要介紹了JavaScript中的await/async的作用和用法的相關(guān)資料

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

直接上例子，比如我們需要按順序獲?。寒a(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 帶來的厄運金字塔，相比起來代碼更清晰了。

// 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(function(products){
console.log('Promises/products >>>', products);
});
// 獲取用戶數(shù)據(jù)
requestP('users.json').then(function(users){
console.log('Promises/users >>>', users);
});
// 獲取評論數(shù)據(jù)
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 一個新的特性，能夠暫停/執(zhí)行代碼。yield 表示暫停，iterator.next 表示執(zhí)行下一步，如果你不了解 Generators 也沒關(guān)系，可以忽略它直接學習 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 API
try {
// 獲取產(chǎn)品數(shù)據(jù)
let products = await fetch('products.json');
// Parsing products
let parsedProducts = await products.json();
// 獲取用戶數(shù)據(jù)
let users = await fetch('users.json');
// Parsing users
let parsedUsers = await users.json();
// 獲取評論數(shù)據(jù)
let comments = await fetch('comments.json');
// Parsing comments
let 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);
}
}());

按數(shù)組順序執(zhí)行

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

再次結(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 用同步的思維去解決異步的代碼，感覺非?？岱浅Ｋ?！關(guān)于js中的await/async的作用和用法就給大家介紹這么多，希望對大家有所幫助，如果大家有任何疑問請給我留言，小編會及時回復大家的。在此也非常感謝大家對腳本之家網(wǎng)站的支持！

您可能感興趣的文章: