vue学习--前端交互(五、接口调用-async/await用法)

1 async/await基本用法

• async/await是ES7引入的新语法，可以更加方便的进行异步操作
• async关键字用于函数上（async函数的返回值是Promise实例对象）
• await关键字用于async函数当中（await可以得到异步结果）

<script type="text/javascript" src="js/axios.js"></script>
  <script type="text/javascript">
    /*
      async/await 处理异步操作：
      async函数返回一个Promise实例对象
      await后面可以直接跟一个 Promise实例对象
    */
    axios.defaults.baseURL = 'http:localhost:3000';
    // axios.get('adata').then(function(ret){
    //   console.log(ret.data)
    // })

    // async function queryData() {
    //   var ret = await axios.get('adata');
    //   // console.log(ret.data)
    //   return ret.data;
    // }

    async function queryData() {
      var ret = await new Promise(function(resolve, reject){
        setTimeout(function(){
          resolve('nihao')
        },1000);
      })
      // console.log(ret.data)
      return ret;
    }
    queryData().then(function(data){
      console.log(data)
    })
  </script>

2 async/await处理多个异步请求

  <script type="text/javascript" src="js/axios.js"></script>
  <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>