vue+ES 6 asyncとawait

1548 ワード

役割:asyncおよびawaitは、非同期を処理するために使用される.同期のように非同期で実行する必要があり、結果を非同期で返した後、結果に基づいて実行を続行する必要があります.awaitasync functionの中に置かなければならない役割はPromiseのresolveの出現を待つことであり、この過程はブロックされている.asyncは、functionが非同期であることを示すために使用され、awaitは、非同期メソッドの実行が完了するのを待つために使用される.awaitを使用するとthenを使用して非同期操作の戻り値を受け入れる必要はなく、変数に直接値を割り当てることができます.与えられた値はresolveが与えた値です.
インタフェースaxiosの例を加える
created () {
    this.init()
},
methods: {
    //    1   2      ,  init  
    async init () {
      try {
          let oneRes = await this.queryOne();
          let twoRes = await this.queryTwo();    
          let res = oneRes + twoRes;
          console.log(res);
      } catch (error) {
          console.log(error);
      }        
    },
    //  1
    queryOne () {
        const params = {name: xxx}
        return new Promise((resolve, reject) => {
            axios.post('/XXXX', { params}).then((res) => {
                if (data.rs === 1) {
                    resolve(data)
                }
            }).catch((err) => {
                reject(err)
            })
        })
    },
    //  2
    queryTwo () {
        const params = {name: xxx}
        return new Promise((resolve, reject) => {
            axios.post('/XXXX', { params }).then((data) => {
                if (data.rs === 1) {
                    resolve(data)
                }
            }).catch((err) => {
                reject(err)
            })
        })
    },
},