沐鳴登錄_ES7 async/await 的應用

async/await是什麼?

async 是”異步”的意思,await是async wait的簡寫,顧名思義我們就可以理解為等待異步函數的執行完成

async 函數返回的是一個 Promise 對象,如果在函數中直接 return 一個值,async 會把這個直接量通過 Promise.resolve( ) 封裝成 Promise 對象。
我們可以通過以下這段代碼來說明這個結論:

上面我們說到,await 用於等待 async 函數的返回值
await 不僅僅用於等 Promise 對象,它可以等任意表達式的結果

如果他等到的不是一個Promise對象
那麼他的運算結果就是返回的字符串/對象等值

如果他等到的是Promise對象,那麼他就開始阻塞後面的代碼,直到他得到async返回的resolve值
我們就可以把Promise中調用resolve()函數這個操作,當成是Promise中耗時函數(比方說異步請求或者settimeout()函數)處理完畢的一個信號,這樣就比較好理解
下面我們用一個settimeout函數來模擬費時函數

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

我們可以看到控制台在一秒后輸出了”完成”

async/await的應用場景

那我們什麼情況下會使用呢?

一個請求接着一個請求

當後面的請求依賴前面的請求的值時
舉個例子:
有一個列表頁面,頁面需要展示所有我預定的場次信息,第一個接口返回了所有場次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()函數返回下一個請求需要的列表
          });
      });
    },

再比如說:
簽到功能,若簽到成功則返回座位歷史預約情況,若簽到失敗則只显示簽到失敗的彈框

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請求預約信息,如果這個時候我們還按照順序請求的話必然會費時
我們可以來驗證一下:
順序請求:

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

同時請求:

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");

      });
    },

我們可以看到同時請求的速度快

總結

當我們需要請求的信息在邏輯上比較複雜時,可以考慮使用async/await
當然也有人說為什麼不用Promise而要用async/await呢?
在實踐中我們可以發現:
Promise 方案的死穴 —— 參數傳遞太麻煩了
使用async/await既可以很方便的讀取返回值,代碼也比較清晰易讀

來自:https://segmentfault.com/a/1190000022211133

站長推薦

1.雲服務推薦: 國內主流雲服務商,各類雲產品的最新活動,優惠券領取。地址:阿里雲騰訊雲華為雲

2.廣告聯盟: 整理了目前主流的廣告聯盟平台,如果你有流量,可以作為參考選擇適合你的平台點擊進入

鏈接: http://www.fly63.com/article/detial/8481