async/await方法解析
欲了解await,必须先了解Promise,可参考: http://www.cnblogs.com/yanze/p/6347646.html
支持度: ES6已支持Promise,ES7也决定支持await
首先查看一个实例:
var f= ()=> {
return new Promise((resolve, reject)=> {
setTimeout(function(){
console.log(1)
resolve(1)
}, 2000)
})
}
var tryAwait= async ()=>{
var data= await f()
console.log(data)
}
用同步的思维方式去解决异步的代码,省去了传统方式繁琐的回调和promise方式的多重promise。
注意项:
1.await只能在async函数内使用
2.await后面一般接着promise对象或其他可等待的对象,会阻塞代码,等待其返回值,当然也能是一般变量,但会立即执行
什么是其他可等待的对象,这个后面说
接下来是传统方式:
var f= ()=> {
setTimeout(function(){
console.log(1)
traditional(1)
}, 2000)
}
f()
var traditional= (data)=> {
console.log(data)
}
弊端: 代码繁琐,逻辑冗杂,在多重回调的情况下尤为如此(此例也许不明显,毕竟只是实例,但相信各位也明白)
单纯promise的方式:
var f= ()=> {
return new Promise((resolve, reject)=> {
setTimeout(()=> {
console.log(1)
resolve(1)
}, 2000)
})
}
f().then((data)=> {
console.log(data)
})
弊端: 每个then方法内部都是一个独立作用域,若是想共享数据,就要将部分数据暴露在外场,在then内部赋值一次
且要是有很多then方法,代码会充满Promise方法
本文参考: http://www.tuicool.com/articles/ZZnuQzZ
-------------------------------------------------
什么是要等待的值?
Promise对象当然可以
async function testAsync(){
let res= await returnP()
console.log(res)//3
}
function returnP(){
return new Promise((resolve)=>{
setTimeout(()=>{
resolve(3)
},3000)
})
}
testAsync()
then的写法也是可以的(then方法返回一个promise对象!)
async function testAsync(){
let res= await returnP()
console.log(res) //55
}
function returnP(){
return new Promise((resolve)=>{
setTimeout(()=>{
resolve(3)
},3000)
}).then(()=>{
return 55
})
}
testAsync()
----------------------------------------------------------
setTimeout?不行
async function testAsync(){
let res= await returnP()
console.log(res)
}
function returnP(){
setTimeout(()=>{
return
}, 3000)
}
testAsync()
await修饰的函数的返回值,可以(很有意思的写法,可形成async大串联!)
async function testAsync(){
let res= await returnP()
console.log(res)
}
async function returnP(){
var a= await aa()
return a
}
function aa(){
return new Promise((resolve)=>{
setTimeout(()=>{
resolve(33)
},1000)
})
}
testAsync()
另外有一种工作里常见的错误写法,这里也列举出来
async function testAsync(){
let res= await returnP()
console.log(res)
}
async function returnP(){
new Promise((resolve)=>{
setTimeout(()=>{resolve(1)},2000)
}).then(()=>{
return 100
})
}
testAsync()
async/await方法解析的更多相关文章
- async/await使用深入详解
async和await作为异步模型代码编写的语法糖已经提供了一段时间不过一直没怎么用,由于最近需要在BeetleX webapi中集成对Task方法的支持,所以对async和await有了深入的了解和 ...
- async/Await使用和原理
await/async是.NetFramework4.5出现的,是语法糖,由编译器提供的功能! await/async 是C#保留关键字,通常是成对出现,一般的建议是:要么不用,要么用到底 async ...
- ES7 之 Async/await 的使用
在 js 异步请求数据时,通常,我们多采用回调函数的方式解决,但是,如果有多个回调函数嵌套时,代码显得很不优雅,维护成本也相应较高. ES6 提供的 Promise 方法和 ES7 提供的 Async ...
- 异步编程之Async,Await和ConfigureAwait的关系
在.NET Framework 4.5中,async / await关键字已添加到该版本中,简化多线程操作,以使异步编程更易于使用.为了最大化利用资源而不挂起UI,你应该尽可能地尝试使用异步编程.虽然 ...
- Async,Await和ConfigureAwait的关系
[转自]https://mp.weixin.qq.com/s/h10V-FshGoaQUWFPfy-azg 在.NET Framework 4.5中,async / await关键字已添加到该版本中, ...
- Promise和async/await
1.promise对象 promise 对象有三种状态:pending(进行中).fulfilled(已成功)和 rejected(已失败).promise 对象的状态改变,只有两种可能:从 pend ...
- C#异步编程由浅入深(二)Async/Await的作用.
考虑到直接讲实现一个类Task库思维有点跳跃,所以本节主要讲解Async/Await的本质作用(解决了什么问题),以及Async/Await的工作原理.实现一个类Task的库则放在后面讲.首先回顾 ...
- .Net Core中无处不在的Async/Await是如何提升性能的?
一.简介 Async/Await在.Net Core中真的是无处不在,到处都是异步操作,那为什么要用?有什么作用?别人说能提升性能?网上一堆文章看的绕晕了也没说清楚, 所以这里从理论,实践,原理一个个 ...
- Axios及其async await封装
Axios(IE8+) 基于promise的http库可用于浏览器与node.js 1.特性 支持promise API 拦截请求和相应 转换请求数据和响应数据 取消请求 自动转换JSON数据 客户端 ...
随机推荐
- HTML CSS表格如何控制上下间距
css:td{margin-top:10px; 上间距margin-right:10px; 右间距margin-bottom:10px; 下间距margin-left:10px; 左间距}
- libsvm以概率输出单个test样例的判别结果
在函数svmtrain和svmpredict的输入参数部分加入'-b 1'比如原先是 svmtrain -c 8.0 -g 0.0078125 a1a.scale 修改过后就是 svmtrain -b ...
- echarts(3.0)的基本使用(标签式导入)
function loadRainFallCharts(msg) { var obj = {}; obj.x = []; obj.y = []; obj.line = []; var accumula ...
- Android项目页面跳转小Demo
近期在做Android项目的开发,刚刚接触会有非常多新东西须要学习,从环境的搭建到语言的熟悉都是须要一步步完毕的,接下来就拿一个页面跳转的样例来和大家分享一下自己的心得体会. 採用的架构: Demo中 ...
- hdu 3062+1824(2-sat入门)
题目链接:http://acm.hdu.edu.cn/showproblem.php?pid=3062 思路:根据矛盾关系连边(如果a与b矛盾,则连边a'->b,b'->a),然后强连通缩 ...
- linux stress 压测命令的使用
一.stress工具安装:1.获取stress源码安装包(stress-1.0.4.tar.gz)3.解压并安装 [root@localhost /]#cd /tmp/ [root@localhost ...
- 关于 js 动态生成html 绑定事件失效的问题
在实际问题中,也只到使用新版jq 的on 事件 进行动态元素的绑定: 是这样 (但是依然没有效果——): $('dom节点').on('click',function(){}) 之后经过查阅发现:正确 ...
- using 关键字的使用
using 关键字的使用主要分为两种类型:using declaration(using 声明)和using directive(using 命令): using 声明:引入特定名称空间中的一个成员. ...
- 【BZOJ3620】似乎在梦中见过的样子 KMP
[BZOJ3620]似乎在梦中见过的样子 Description “Madoka,不要相信 QB!”伴随着 Homura 的失望地喊叫,Madoka 与 QB 签订了契约. 这是 Modoka 的一个 ...
- 【BZOJ4245】[ONTAK2015]OR-XOR 贪心
[BZOJ4245][ONTAK2015]OR-XOR Description 给定一个长度为n的序列a[1],a[2],...,a[n],请将它划分为m段连续的区间,设第i段的费用c[i]为该段内所 ...