async-await的原理和使用

总结:其实前面加了async的函数,当我在这个函数调用的时候进行打印发现它输出的是一个promise对象,其实这个函数的本质就是返回了一个promise对象,在这个函数里里我们加上await后,即使调用的是异步代码,它也会变成类似于同步,只有让这个异步代码执行完后,才会执行下面的同步代码来执行,这就是它的本质。

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
</head>

<body>

</body>

</html>
<script>


  function asyncRun() {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve('异步执行的结果')
      }, 200);
    })
  }

  // asyncRun().then(res => {
  //   console.log(res);
  // })


  async function makePro() {
    let res = await asyncRun();//加了await后即使是异步,它也会变成同步先执行
    console.log(res);//它会等上面执行完后再执行这一行内容
  }
  console.log(makePro());//这个async函数其实就是返回了一个promise对象
  makePro();
</script>

使用案例:
async-await的原理和使用_第1张图片

你可能感兴趣的:(十二.vue,三.JavaScript)