Vue学习（三十七）——async/await函数

最新推荐文章于 2024-07-08 16:40:47 发布

云中、漫步

最新推荐文章于 2024-07-08 16:40:47 发布

阅读量282

点赞数

分类专栏： Vue学习

本文链接：https://blog.csdn.net/weixin_44075963/article/details/109106457

版权

Vue学习专栏收录该内容

24 篇文章 14 订阅

订阅专栏

文章目录

前面我们说到，promise用于控制异步流程，但是它本身还是需要回调函数，这不太方便。因此，在es7中新增了一个函数——async函数。

async function queryData() {}

用这种方式声明的函数为异步函数，不会阻塞后面代码的执行。

async作为一个关键字放到函数前面
任何一个 async 函数都会隐式返回一个 promise

在async函数中使用await

await 关键字只能在使用 async 定义的函数中使用；
await后面可以直接跟一个 Promise实例对象；
async/await 让异步代码看起来、表现起来更像同步代码

async 基础用法：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
<div id="app">
</div>
<script type="text/javascript" src="js/vue.js"></script>
<script type="text/javascript" src="js/axios.js"></script>
<script type="text/javascript">
    // async作为一个关键字放到函数前面
    async function queryData() {
        // await关键字只能在使用async定义的函数中使用
        var ret = await axios.get("http://localhost:8080/data");
        return ret;
    };
    // 任何一个async函数都会隐式返回一个promise,我们可以使用then 进行链式编程
    queryData().then(function (data) {
        console.log(data)
    })
</script>
</body>
</html>

async/await处理多个异步任务：

 <script type="text/javascript">
    /*
      async/await处理多个异步任务
    */
    axios.defaults.baseURL = 'http://localhost:3000';

    async function queryData() {
      var info = await axios.get('async1');
      var ret = await axios.get('async2?info=' + info.data);
      return ret.data;
    }

    queryData().then(function(data){
      console.log(data)
    })
  </script>