JavaScript中的await/async的作用和用法
await/async是ES7最重要特性之一，它是目前为止JS最佳的异步解决方案了。虽然没有在ES2016中录入，但很快就到来，目前已经在ES-NextStage4阶段。
直接上例子，比如我们需要按顺序获取：产品数据=>用户数据=>评论数据
老朋友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能消除callbackhell带来的厄运金字塔，相比起来代码更清晰了。
//Promise
//封装Ajax，返回一个Promise
functionrequestP(url){
returnnewPromise(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('Parallelpromises>>>',data);
});
强劲的新朋友Generators
Generators也是ES6一个新的特性，能够暂停/执行代码。yield表示暂停，iterator.next表示执行下一步，如果你不了解Generators也没关系，可以忽略它直接学习await/async。
//Generators
functionrequest(url){
ajax(url,(response)=>{
iterator.next(JSON.parse(response));
});
}
function*main(){
//获取产品数据
letdata=yieldrequest('products.json');
//获取用户数据
letusers=yieldrequest('users.json');
//获取评论数据
letproducts=yieldrequest('comments.json');
console.log('Generator/products>>>',products);
console.log('Generator/users>>>',users);
console.log('Generator/comments>>>',comments);
}
variterator=main();
iterator.next();
碉堡的朋友await/async
与Promise结合使用
//封装Ajax，返回一个Promise
functionrequestP(url){
returnnewPromise(function(resolve,reject){
ajax(url,(response)=>{
resolve(JSON.parse(response));
});
});
}
(async()=>{
//获取产品数据
letdata=awaitrequestP('products.json');
//获取用户数据
letusers=awaitrequestP('users.json');
//获取评论数据
letproducts=awaitrequestP('comments.json');
console.log('ES7Async/products>>>',products);
console.log('ES7Async/users>>>',users);
console.log('ES7Async/comments>>>',comments);
}());
与FetchAPI结合使用：
(async()=>{
//Async/awaitusingthefetchAPI
try{
//获取产品数据
letproducts=awaitfetch('products.json');
//Parsingproducts
letparsedProducts=awaitproducts.json();
//获取用户数据
letusers=awaitfetch('users.json');
//Parsingusers
letparsedUsers=awaitusers.json();
//获取评论数据
letcomments=awaitfetch('comments.json');
//Parsingcomments
letparsedComments=awaitcomments.json();
console.log('ES7Async+fetch/products>>>',parsedProducts);
console.log('ES7Async+fetch/users>>>',parsedUsers);
console.log('ES7Async+fetch/comments>>>',parsedComments);
}catch(error){
console.log(error);
}
}());
按数组顺序执行
(async()=>{
letparallelData=await*[
requestP('products.json'),
requestP('users.json'),
requestP('comments.json')
];
console.log('Asyncparallel>>>',parallelData);
}());
再次结合Fetch
(async()=>{
letparallelDataFetch=await*[
(awaitfetch('products.json')).json(),
(awaitfetch('users.json')).json(),
(awaitfetch('comments.json')).json()
];
console.log('Asyncparallel+fetch>>>',parallelDataFetch);
}());
使用await/async用同步的思维去解决异步的代码，感觉非常酷非常爽！关于js中的await/async的作用和用法就给大家介绍这么多，希望对大家有所帮助，如果大家有任何疑问请给我留言，小编会及时回复大家的。在此也非常感谢大家对毛票票网站的支持！