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来实现同步异步的资料请关注脚本之家其它相关文章！

最新评论