[vue.js]關於ES6 Promise的進階版 → ES7 async/await 的應用

時間 2020-04-01

標籤 vue.js vue 關於 es6 promise 進階 es7 async await 應用欄目 JavaScript 简体版

原文原文鏈接

async/await是什麼?

async 是"異步"的意思，await是async wait的簡寫,顧名思義咱們就能夠理解爲等待異步函數的執行完成ios

async 函數返回的是一個 Promise 對象,若是在函數中直接 return 一個值，async 會把這個直接量經過 Promise.resolve( ) 封裝成 Promise 對象。
咱們能夠經過如下這段代碼來講明這個結論:
axios

上面咱們說到,await 用於等待 async 函數的返回值
await 不單單用於等 Promise 對象，它能夠等任意表達式的結果併發

若是他等到的不是一個Promise對象
那麼他的運算結果就是返回的字符串/對象等值
若是他等到的是Promise對象,那麼他就開始阻塞後面的代碼,直到他獲得async返回的resolve值
咱們就能夠把Promise中調用resolve()函數這個操做,當成是Promise中耗時函數(比方說異步請求或者settimeout()函數)處理完畢的一個信號,這樣就比較好理解
下面咱們用一個settimeout函數來模擬費時函數

async function test() {
        return new Promise((resolve, reject) => {
            setTimeout(() => {
               resolve("完成")
              }, 1000);
           }
        )
    }
    console.time('testForEach');
    var result = await test()
    console.log(result)
    console.timeEnd('testForEach');

咱們能夠看到控制檯在一秒後輸出了"完成"異步

async/await的應用場景

那咱們什麼狀況下會使用呢?async

一個請求接着一個請求

當後面的請求依賴前面的請求的值時
舉個例子:
有一個列表頁面,頁面須要展現全部我預約的場次信息,第一個接口返回了全部場次id的合集,我須要根據這個合集去請求第二個接口,以此來獲取場次的具體信息函數

async getinfor() {
      let that = this;
      let list = await this.getlist(); // 獲取列表
      let roundlist = await this.getroundlist(list); //根據roundid獲取列次
 },
 getlist() {
      var that = this;
      return new Promise((resolve, reject) => {
        axios
          .get(url)
          .then(data => {
            resolve(data.data.data);//調用resolve()函數返回下一個請求須要的列表
          });
      });
    },

再好比說:
簽到功能,若簽到成功則返回座位歷史預定狀況,若簽到失敗則只顯示簽到失敗的彈框post

async getseathistory() {
      var msign = await this.handlesign();
      swith(msign){
        case "sucess":
            this.$vux.toast.text("簽到成功");
            ...
            //進行獲取後續座位預定歷史相關請求
            break;
        case "fail":
            this.$vux.toast.text("簽到失敗");
            break;
     }
 },
handlesign() {
      return new Promise((resolve, reject) => {
        Axios.post(url,data).then(res => {
          if (res.data.code != 200) {
            resolve("sucess");
          } else if (res.data.code == 200) {
            resolve("fail");
          }
        });
      });
    }

併發請求

須要同時獲取列表的多方面信息，並且信息須要多個請求才能得到，可是獲取的信息沒有依賴關係，能夠同時請求
這個時候就須要用到
Promise.all([p1, p2, p3])
咱們再來舉個例子:
仍是獲取預定列表,第一個接口返回了roundid(場次id)和orderid(預定id),咱們須要roundid去請求場次信息,根據orderid請求預定信息,若是這個時候咱們還按照順序請求的話必然會費時
咱們能夠來驗證一下:
順序請求:this

async getinfor() {
      let that = this;
      console.time("test");
      let list = await this.getlist(); // 獲取列表
      let roundlist = await this.getroundlist(); //根據roundid獲取列次
      let getseatnum = await this.getseatnum(); // 搶座成功的獲取搶座座次
      //   Promise.all([that.getroundlist(),that.getseatnum()]).then((value)=>{
      //     console.log(value)
      // })
      console.timeEnd("test");
    }

同時請求:url

async getinfor() {
      let that = this;
      console.time("test");
      let list = await this.getlist(); // 獲取列表
      // let roundlist = await this.getroundlist(); //根據roundid獲取列次
      // let getseatnum = await this.getseatnum(); // 搶座成功的獲取搶座座次
      Promise.all([that.getroundlist(), that.getseatnum()]).then(value => {
        console.log(value);
      console.timeEnd("test");

      });
    },