vue async/await處理異步請求

async/await的基本用法

這是一個用同步的思維來解決異步問題的方案，當前端接口調用需要等到接口返回值以后渲染頁面時。

• async/await是ES7引用的新語法，可以更加方便的進行異步操作
• async關鍵子用於函數上（async函數的返回值是Promise實例對象）
• await關鍵字用於async函數當中（await可以得到異步的結果，后跟Promise實例對象）

 async的用法，它作為一個關鍵字放到函數前面，用於表示函數是一個異步函數，因為async就是異步的意思， 異步函數也就意味着該函數的執行不會阻塞后面代碼的執行，async 函數返回的是一個promise 對象。

await的含義為等待。意思就是代碼需要等待await后面的函數運行完並且有了返回結果之后，才繼續執行下面的代碼。這正是同步的效果

// 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)
    })

async/await處理多個異步請求

第二個接口需要調用第一個接口獲取的數據

使用async/await就能像平時一樣將所需要的代碼一條一條的運行

    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)
    })