async 与await

第一来看一段前端代码

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

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>

  <script>
    function one() {
      return "1"
    }
    function two() {
      return "2"
    }
    function three() {
      return "3"
    }
    function four() {
      return "4"
    }

    function run() {
      console.log(one())
      console.log(two())
      console.log(three())
    }
    run()
  </script>
</body>

</html>

很明显，我们可以打开浏览器控制台，查看输出结果

async 与await

输出结果

run()方法中的函数依次执行。

接下来我们做一些改变，将two（）添加异步操作，将two（）改为下面代码。

    function two() {
      setTimeout(()=>{
       return "2"
      },3000)
    }

它的作用是：等待3秒，然后返回2

我们此时再打开控制台看一看结果是什么？

async 与await

输出结果

我们发现原本应该是2的位置居然变成了underfined！！

我们来分析一下：函数two()模拟了一个异步操作，但是当执行函数console.log(two()）的时候，实际上会立刻执行并不会等待3秒，因此此时的two()自然没有任何返回值。

我们此时可能有些疑惑，为什么要让程序进行异步操作呢？直接让他从上到下执行下去不就好了吗？

实则不是这样的，前端向后端请求数据到就接受数据这个过程是需要时间的，如果不进行处理的话，那么结果就是underfined 与我们预期不同。

async 是 JavaScript 中用于处理异步操作的关键字，一般与 await 结合使用。它的作用是使函数变为异步函数，以便在其中执行异步操作而不阻塞程序的执行。async 函数返回一个 Promise 对象，该 Promise 将在函数的异步操作完成后解决（resolve）为函数的返回值，或者在出现错误时拒绝（reject）。

接下里我们尝试使用async与await来更改之前的程序，看看它有什么作用

    async function two() {
      setTimeout(()=>{
       return "2"
      },3000)
    }

async 与await

输出结果

这时我们发现原本应该是undefind的地方被替换成了一个Promise对象.我们知道了它的作用，但这并不是我们想要的结果。

我们想要的结果是one()函数执行，然后等待3秒two()执行，最后three()执行。

因此我们再看一看async与await的作用，再更改一下代码

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

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <script>
        function one() {
            return "1"
        }
        async function two() {
            return new Promise((resolve, reject) => {
            setTimeout(() => {
                   resolve("2")
                }, 3000)
            })
        }
        function three() {
            return "3"
        }
        function four() {
            return "4"
        }

        async function run() {
            console.log(one())
            console.log(await two())
            console.log(three())
        }
        run()
    </script>
</body>

</html>