await/async 是 ES7 最重要特性之一，它是目前为止 JS 最佳的异步解决方案了。虽然没有在 ES2016 中录入，但很快就到来，目前已经在 ES-Next 。
直接上例子，比如我们需要按顺序获取：产品数据=>用户数据=>评论数据
老朋友 Ajax
传统的写法，无需解释
{
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 带来的厄运金字塔，相比起来代码更清晰了。
{
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);
});
当然使用可以更简洁
>>',data);
});
强劲的新朋友 Generators
Generators 也是 ES6 一个新的特性，能够 暂停/执行 代码。yield 表示暂停，iterator.next 表示执行下一步，如果你不了解 Generators 也没关系，可以忽略它直接学习 await/async。
{
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 结合使用
{
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/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);
}
}());
按数组顺序执行
{
let parallelData = await* [
requestP('products.json'),requestP('comments.json')
];
console.log('Async parallel >>>',parallelData);
}());
再次结合 Fetch
{
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的作用和用法就给大家介绍这么多。编程之家 jb51.cc 收集整理的教程希望能对你有所帮助，如果觉得编程之家不错，可分享给好友！感谢支持。
原文链接：https://www.f2er.com/js/44758.html