vue中使用async和await来实现同步和异步
用async/await 来处理异步近期项目中大量使用async,从服务器获取数据,解决一些并发传参问题。代码很简单。在此也看了一些博客,现在async/await已经大范围让使用,是时候总结一波啦。先说一下async的语法,它作为一个关键字放在函数前面,用于表示函数是一个异步函数,因为async就是异步的异步,异步函数也就是意味着这个函数的执行不会阻塞后面代码的执行。简单的写一个async函数a
用async/await 来处理异步
近期项目中大量使用async,从服务器获取数据,解决一些并发传参问题。代码很简单。在此也看了一些博客,现在async/await已经大范围让使用,是时候总结一波啦。
先说一下async的语法,它作为一个关键字放在函数前面,用于表示函数是一个异步函数,因为async就是异步的异步,异步函数也就是意味着这个函数的执行不会阻塞后面代码的执行。简单的写一个async函数
async function hello(){
return 'hello world';
}
语法很简单,就是在函数前面加上async,他就成异步函数啦。怎么去调用呢,其实一样,平时怎么使用函数我们就怎么去调用它,直接加括号就可以啦,为了表示它没有阻塞后面的代码我们写个案例
async function hello(){
return 'hello world';
}
console.log(hello());
console.log('我是先执行的');
好像没有什么用,别急,首先我们看到hello()返回的是一个promise对象,其次它好像没有去异步执行。
async异步函数返回的是一个promise对象,如果要获取到promise返回值,我们就应该使用.then方法。
async function hello(){
return 'hello world';
}
hello().then(result=>{
console.log(result);
})
console.log('我是先执行的');
然后就没问题啦,一个简单的异步函数就OK啦,hello执行的时候没有阻塞后面代码的执行,和我们之前说的一样。
你可能注意到控制台中的promise有一个resolved,这是async函数内部的实现原理,如果async函数中返回一个值,当调用该函数时,内部会调用promise.solve()方法把它转化成一个promise()对象作为返回,但如果hello函数内部发生错误呢?那么就会调用promise.reject()返回一个promise对象,这时修改一下hello()函数
async function hello(flag){
if(flag){
return 'hello world';
}else{
throw 'happen Error';
}
}
console.log(hello(0));
console.log(hello(1));
如果函数内部发生错误,promise对象有一个catch方法进行捕获。
hello(0).catch(err=>{
console.log(err);
})
async是差不多啦,我们再来熟悉一下await关键字,await是等待的意思,那么它在等待什么呢,它后面跟着什么呢?其实它后面可以放任何表达式,不过我们更多放的是一个promise对象的表达式。注意await关键字,只能放在async函数里面!!!
function awaitMethod(num){
return new Promise((resolve,reject)=>{
setTimeout(()=>{
resolve(2*num);
},2000)
})
}
我们再写一个async函数,从而可以使用await关键字,await后面放置的是返回promise对象的一个表达式,所以它后面可以写上awaitMethod函数的调用。
async function test (){
let result = await awaitMethod(30);
console.log(result);
}
然后我们调用这个函数
test();
2秒钟之后控制台输出60。
现在我们看看代码的执行过程,调用test函数时,它遇到了里面的await关键字,await代表等待,代码到这里会暂停,它在等什么呢,等待后面的promise对象执行完成,然后拿到promise的返回值,拿到返回值之后它继续往下执行,直到console.log()执行。
就这一个函数,或许我们看不出来asycn和await的作用,如果我们要计算3个数的值,然后把他们的值加起来输出,或许就看的明显啦。
async function test(){
let result = await awaitMethod(30);
let result1 = await awaitMethod(50);
let result2 = await awaitMethod(30);
console.log(result+result1+result2 );
}
6秒之后控制台,输出220,我们可以看到,写异步代码的就像写同步代码一样啦,再也没有什么回调地狱这一说啦。
更多推荐
所有评论(0)