vue.js

关注公众号 jb51net

关闭
首页 > 网络编程 > JavaScript > javascript类库 > vue.js > vue async/await实现同步异步

vue使用async/await来实现同步和异步的案例分享

作者:aaron9185

近期项目中大量使用async,从服务器获取数据,解决一些并发传参问题,代码很简单,在此也看了一些博客,现在async/await已经大范围让使用,所以本文给大家介绍一下vue使用async/await来实现同步和异步的案例,需要的朋友可以参考下

用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,我们可以看到,写异步代码的就像写同步代码一样啦,再也没有什么回调地狱这一说啦。

以上就是vue使用async/await来实现同步和异步的案例分享的详细内容,更多关于vue async/await来实现同步异步的资料请关注脚本之家其它相关文章!

您可能感兴趣的文章:
阅读全文