async 配合 await 使用

1、未使用 async 和 await

<el-button @click="getData">Promise</el-button>

import getWeater from '@/app/login.js'
methods: {
   getData() {  // 未使用async
        let data = this.getWeaterData()  //未使用 await
        console.log(data)
        console.log('同步，Holle')
    },
    getWeaterData
 
() {
        return getWeater().then(res => {
            console.log('非同步請求！')
            return '非同步返回值'
        })
    }           
}        

呼叫 getWeaterData 方法 return返回的是 getWeater 的 Promise函式， 裡面“非同步請求”並沒有立即執行， 而是先執行了’同步，Holler‘

2、如果需求涉及到順序執行的話，這肯定不符合要求， 隱藏需要使用 async 和 await

<el-button @click="getData">Promise</el-button>

import getWeater from '@/app/login.js'
methods: {
   async getData() {  // 使用async
        let data = await this.getWeaterData()  // 使用 await
        console.log(data)
        console.log('同步，Holle')
    },
    getWeaterData() {
        return getWeater
 
().then(res => {
            console.log('非同步請求！')
            return '非同步返回值'
        })
    }           
}

呼叫 getWeaterData 方法 await 會先等非同步函式裡面的”非同步請求“執行， 然後return “非同步返回值”， 然後賦值到data，最後按順序列印 data, "同步，Holler“

這樣一來就可以按照呼叫的順序執行我們想要的， 把非同步變成同步