JavaScript中的await/async的作用和用法
await/async 是 ES7 最重要特性之一,它是目前爲止 JS 最佳的異步解決方案了。這篇文章主要介紹了JavaScript中的await/async的作用和用法的相關資料
await/async 是 ES7 最重要特性之一,它是目前爲止 JS 最佳的異步解決方案了。雖然沒有在 ES2016 中錄入,但很快就到來,目前已經在 ES-Next Stage 4 階段。
直接上例子,比如我們需要按順序獲取:產品數據=>用戶數據=>評論數據
老朋友 Ajax
傳統的寫法,無需解釋
?
1
2
3
4
5
6
7
8
9
10
11
12
|
// 獲取產品數據
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 帶來的厄運金字塔,相比起來代碼更清晰了。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
|
// Promise
// 封裝 Ajax,返回一個 Promise
function 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 可以更簡潔
?
1
2
3
4
5
6
7
8
|
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。
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
// Generators
function 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 結合使用
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
|
// 封裝 Ajax,返回一個 Promise
function 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 結合使用:
?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
|
(async () => {
// Async/await using the fetch API
try {
// 獲取產品數據
let products = await fetch( 'products.json' );
// Parsing products
let parsedProducts = await products.json();
// 獲取用戶數據
let users = await fetch( 'users.json' );
// Parsing users
let parsedUsers = await users.json();
// 獲取評論數據
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);
}
}());
|
按數組順序執行
?
1
2
3
4
5
6
7
8
|
(async () => {
let parallelData = await* [
requestP( 'products.json' ),
requestP( 'users.json' ),
requestP( 'comments.json' )
];
console.log( 'Async parallel >>>' , parallelData);
}());
|
再次結合 Fetch
?
1
2
3
4
5
6
7
8
|
(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的作用和用法就給大家介紹這麼多,希望對大家有所幫助,如果大家有任何疑問請給我留言,小編會及時回覆大家的。在此也非常感謝大家對腳本之家網站的支持!