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

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM