JavaScript里的await/async的作用和用法
来源:互联网 发布:什么叫分布式系统 知乎 编辑:程序博客网 时间:2024/06/08 15:07
老朋友 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,返回一个 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 可以更简洁
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。
// 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 结合使用
// 封装 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 结合使用:
(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);
}
}());
按数组顺序执行
(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 用同步的思维去解决异步的代码,感觉非常酷非常爽!
阅读全文
0 0
- JavaScript里的await/async的作用和用法
- C#里的async和await
- async 和await的结合promise用法
- 关于JavaScript 的 async/await
- 关于JavaScript 的 async/await
- 理解 JavaScript 的 async/await
- 理解 JavaScript 的 async/await
- 关于JavaScript 的 async/await
- 理解 JavaScript 的 async/await
- 理解 JavaScript 的 async/await
- 理解JavaScript的async/await
- 演示C#里的async和await的使用
- C#Winform里的async和await异步
- WP8的async和await
- WP8的async和await
- await和async的使用方法
- C#的async和await
- C#的async和await
- NodeJS MongoDB CURD 入门
- 子类使用构造函数初始化父类的私有数据
- IDEA生成API接口文档
- Android 项目混淆系列2
- scala快速掌握
- JavaScript里的await/async的作用和用法
- jsp页面报错javax.servlet.jsp.JspException cannot be resolved to a type
- SSM 关于service和dao的封装
- paper-9-(gnuplot) mptcp-test.plt
- HttpWebRequest的GetResponse或GetRequestStream偶尔超时 + 总结各种超时死掉的可能和相应的解决办法
- PLSQL工具导入Excel数据用户连接时报错
- 分针网—每日分享:js实现分页
- httpclient和webservice什么区别? httpclient可以替代webservice,是的,可以替代。
- 三种软件工程师——编码员、程序师和架构师