时间:2021-05-26
await/async 是 ES7 最重要特性之一,它是目前为止 JS 最佳的异步解决方案了。虽然没有在 ES2016 中录入,但很快就到来,目前已经在 ES-Next Stage 4 阶段。
直接上例子,比如我们需要按顺序获取:产品数据=>用户数据=>评论数据
老朋友 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,返回一个 Promisefunction 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。
// Generatorsfunction 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,返回一个 Promisefunction 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 APItry {// 获取产品数据let products = await fetch('products.json');// Parsing productslet parsedProducts = await products.json();// 获取用户数据let users = await fetch('users.json');// Parsing userslet parsedUsers = await users.json();// 获取评论数据let comments = await fetch('comments.json');// Parsing commentslet 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 用同步的思维去解决异步的代码,感觉非常酷非常爽!关于js中的await/async的作用和用法就给大家介绍这么多,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对网站的支持!
声明:本页内容来源网络,仅供用户参考;我单位不保证亦不表示资料全面及准确无误,也不保证亦不表示这些资料为最新信息,如因任何原因,本网内容或者用户因倚赖本网内容造成任何损失或损害,我单位将不会负任何法律责任。如涉及版权问题,请提交至online#300.cn邮箱联系删除。
前言虽然大家知道async/await,但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解JavaScript的async/awai
async/await多个函数关联调用async/await使得异步代码看起来像同步代码async函数会隐式地返回一个promise,而promise的reos
本文介绍了三分钟学会用ES7中的Async/Await进行异步编程,分享给大家,具体如下:Async/Await基本规则async表示这是一个async函数,a
众所周知C#提供Async和Await关键字来实现异步编程。在本文中,我们将共同探讨并介绍什么是Async和Await,以及如何在C#中使用Async和Awai
随着Node.jsv8的发布,Node.js已原生支持async/await函数,Web框架Koa也随之发布了Koa2正式版,支持async/await中间件,