2020-05-06--Vue之前后端交互6-async，awa

async,await

• async：‘异步’
• await:‘等待’

async作为一个关键字放到函数前面

• 任何一个async函数都会隐式返回一个promise

await关键字只能在使用async定义的函数中使用

• await后面可以直接跟一个 Promise实例对象
• await函数不能单独使用
  async/await 让异步代码看起来、表现起来更像同步代码

基本使用

 <script>
         async function queryData() {
      // 1.2 await关键字只能在使用async定义的函数中使用,await后面可以直接跟一个 Promise实例对象
            var ret = await new Promise(function(resolve, reject){
                setTimeout(function(){
                    console.log('timeout')
                    resolve('nihao')
                },5000);
            })
            console.log('hahaha')
      return ret;
    }
    queryData().then(function(data){
        console.log('then')
        console.log(data)
    })
    console.log('finish')
    </script>

由于异步函数和Promise之前加了await关键字，所以，在调用函数时，先输出的只有finish(异步)，其他的都要等待。

如果不加async和await关键字：

结果为：

async 函数处理多个异步函数

之前使用的axios.get().then()的写法也可以改为：

  <script>
        //设置请求头
        axios.defaults.baseURL = 'http://localhost:5000';

        async function queryData() {
            
            // 2.1  添加await之后 当前的await 返回结果之后才会执行后面的代码   
            var info = await axios.get('/get_news');
            //2.2  让异步代码看起来、表现起来更像同步代码
            console.log('hello')
            console.log(info)
            console.log(info.data)
        
        }

        queryData()
    </script>

运行：

当我们要通过axios访问多个服务器接口时，并且还要前后有联系：
比如：当访问购物车中商品的数量后，根据数量再传给后台进行相应操作。这样两个axios就有了联系，这时候可以使用async函数和await关键字，使用异步等待进行访问。

  <script>
        //设置请求头
        axios.defaults.baseURL = 'http://localhost:5000';

        async function queryData() {
            
            // 2.1  添加await之后 当前的await 返回结果之后才会执行后面的代码   
            var info = await axios.get('/get_news');
            //2.2  让异步代码看起来、表现起来更像同步代码
            console.log('hello')
            console.log(info)
            console.log(info.data)

            var ret = await axios.get('/get_comment');
            console.log(ret.data)
        
        }

        queryData()

运行：
这个不错的字符串出现的稍晚于上边的数据。这就是await的作用。

这也就是对之前的axios.get().then()代码的改写，让代码看起来不想像异步。

• 以前的axios要得到结果要使用then(函数)回调函数得到数据，用多了还是会有回调地狱，
• 那么加上async awit关键字，就相当于等待axios请求回应后，通过之前的回调函数的返回值(更底层一点就是Promise对象的resolve函数)拿到数据。那么就可以不适用then方法得到返回的数据。

然而上边的异步函数没有写返回值，那么在函数最后把数据返回

return ret.data

通过调用函数：
ret.data是字符串，但是在async的作用下，把ret.data转换为Promise对象。
queryData()返回的是Promise对象，Promise对象再调用then()可以拿到其中的数据。

queryData().then(function(data){
            console.log(data)
        })

也可以再使用async和await封装为一个异步函数进行调用。