async/await 筆記

async

1. async 會將函數變成一個異步函數。
2. async 無論寫不寫 return ，必定會返回一個 Promise對象
3. async 的函數中若是 return 了一個值，那麼 async 會把這個值經過 Promise.resolv() 封裝成 Promise 對象。所以能夠經過下面的用法使用。

async function fn(){
    return '你好'
}        
fn().then( a => { console.log(a) } ) // a ==> 你好

await

1. await 會讓代碼阻塞
2. await 必須寫在 async 的函數中。
3. let a = await fn() 中，若是 fn() 函數中返回的是一個 Promise 對象，對象中使用了 resolve('123') ，那麼 a 的值就是 '123'
4. let a = await fn() 中，若是 fn() 函數 return 的不是一個 Promise 對象，而是一個字符串或其餘值，那麼 a 的值會是一個字符串或其餘值。
5. await 編寫的代碼會容易觀看。

示例1：

# 經過 async/asait 實現如下功能
`# 有一個列表頁面,頁面須要展現全部我預約的場次信息,第一個接口返回了
# 全部場次id的合集,我須要根據這個合集去請求第二個接口,以此來獲取場次
# 的具體信息`
 async getinfor() {
      let that = this;
      let list = await this.getlist(); // 獲取列表id合集
      let roundlist = await this.getroundlist(list); //根據id獲取場次
 },
 getlist() {
      var that = this;
      return new Promise((resolve, reject) => {
        axios.get(url)
          .then(data => {
            resolve(data);//調用resolve()函數返回下一個請求須要的列表
          });
      });
    }
 getroundlist(list){
    return new Promise((resolve, reject) => {
        axios.get(url + list)
          .then(data => {
            resolve(data);//調用resolve()函數返回下一個請求須要的列表
          });
      });
 }
 
 在上面的例子中，由於 await 會阻塞後面的代碼，只有當 
 await this.getList() 執行完，纔會執行下面的代碼，所
 以很方便的實現了這個功能

示例2：

# 簽到功能,若簽到成功則返回座位歷史預定狀況,若簽到失敗則
# 只顯示簽到失敗的彈框
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");
            }
        });
    });
}