async的意思是“异步”,顾名思义就是有关异步操作的关键字,async 是 ES7 才有的,与我们之前说的Promise、Generator有很大的关联。
使用语法:
async function name(param){
param //传递给函数的参数名称
statements //函数体
}
name().then(function(res){
res//异步操作返回的结果
})
async 函数返回一个Promise对象,可以使用then方法添加回调函数。具体实例如下:
async function show(){
return {a:12,b:15}
}
console.log(show())//Promise {<fulfilled>: {…}}
show().then(res=>{
console.log("res",res)
})
await关键字存在async函数表达式中,用于等待Promise对象,暂停执行,等到异步操作完成后,恢复async函数的执行并返回解析值。如果把await放在asnyc函数体外,会报语法错误。
使用语法:
asnyc function name(){
returnValue = await expression;
}
expression 是一个Promise对象或一个需要等待的值,针对所跟不同表达式,有两种处理方式:
对于Promise对象,await会阻塞主函数执行,等待Promise对象执行resolve之后,resolve返回值作为await表达式运算结果,然后继续向下执行。
对于非Promise对象,可以是字符串、布尔值、数值以及普通函数等。await直接返回对应的值,而不是等待其执行结果。
await等待Promise对象实例如下:
async function test1(){
console.log("执行")
return new Promise((resolve,reject)=>{
setTimeout(()=>{
console.log("延迟3秒之后返回成功")
resolve({a:'1'})
},3000)
})
}
async function test2(){
let x = await test1()
console.log("x",x)//{a: "1"}
return x
}
test2().then(function(res){
console.log("res",res)//{a: "1"}
})
await 跟 普通函数 实例如下:
function test3(){
console.log("普通函数")
}
async function test4(){
await test3()
console.log("直接执行")
}
test4()
上述的await后跟Promise对象,我们知道Promise有两种状态,resolved() 和 rejected() ,如果Promise对象变为rejected,会如何处理?
function testAwait(){
return Promise.reject("error");
}
async function test1(){
await testAwait();
console.log("test1");//没有打印
}
test1().then(v=>{
console.log(v);
}).catch(e=>{
console.log(e);//"error"
})
从上实例执行结果发现,返回的reject状态被外层的catch捕获,然后终止了后面的执行。但是在有些情况下,即使出错了我们还是继续执行,而不是中断,此时我们借助try...catch捕获内部异常。
function test1(){
return new Promise((resolve,reject)=>{
reject("error")
})
}
async function test2(){
try{
await test1()
}catch(e){
console.log("报错",e)
}
}
test2().then((res)=>{
console.log("执行成功",res) // 打印:执行成功undefined
}).catch(err=>{
console.log('err',err)
})
Generator与async对比:
从 Promise 到 Generator , 再到 async ,对于异步编程的解决方案越来越完美,这就是ES6不断发展的魅力所在。
虽然大家知道async/await,但是很多人对这个方法中内部怎么执行的还不是很了解,本文是我看了一遍技术博客理解 JavaScript 的 async/await
Async实际上是一个封装了自动化执行并返回一个Promise的Generator函数的语法糖。这句话的意思我们可以分为三个部分来解读:首先它有一个自动化执行,Generator函数是依靠不停的调用.net来依次执行的,Async有一个自动化执行的过程
Node.js7.6起, Node.js 搭载了有async函数功能的V8引擎。当Node.js 8于10月31日成为LTS版本后,我们没有理由不使用async函数。接下来,我将简要介绍async函数,以及如何改变我们编写Node.js应用程序的方式。
自2015年11 发布1.7版以来,TypeScript 已支持 async/await 关键字。编译器使用 yield 将异步函数转换为生成器函数。这意味着咱们无法针对 ES3 或 ES5,因为生成器仅在 ES6 中引入的。
async/await 大家肯定都用过,在处理异步操作的时候真的是很方便。那今天主要讲一些在使用 async/await 时容易忽略和犯错的地方。上面的代码中,每一行都会 等待上一行的结果返回后才会执行。
有一个图片列表,我想要在图片onload成功之后获取加载成功的图片列表,图片资源加载为异步,我们使用ES7的async await方式实现,多张图片,是用for循环。
Async 和 Awaiit 是 Promise 的扩展,我们知道 JavaScript 是单线程的,使用 Promise 之后可以使异步操作的书写更简洁,而 Async 使 Promise 像同步操作
最近代码写着写着,我突然意识到一个问题——我们既然已经有了 Promise 和 then,为啥还需要 async 和 await?这不是脱裤子放屁吗?
如果让你手写async函数的实现,你是不是会觉得很复杂?这篇文章带你用20行搞定它的核心。经常有人说async函数是generator函数的语法糖,那么到底是怎么样一个糖呢?让我们来一层层的剥开它的糖衣。
async/await是ES7的写法,可以让非同步call back写法看起来像同步的顺序去执行。以下我们new一个Promise的class并return给一个function
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!