1. 程式人生 > 實用技巧 >async await 非同步、等待、按順序執行

async await 非同步、等待、按順序執行

<template>
  <div>
  </div>
</template>
<script>
export default {
  name: 'AsyncAwait',
  data() {
    return {
    }
  },
  created(){
    this.getProvinces()
  },
  methods:{
    //await 只能用在async標註的函式中
    province(){
      return new Promise((resolve)=>{
      setTimeout(() => {
          resolve('省')
          console.log('省')
       }, 4000);
      })
      
    },
    city(){
      return new Promise((resolve)=>{
        setTimeout(() => {
          resolve('市')
          console.log('市')
       }, 2000);
      })
      
    },
    country(){
      return new Promise((resolve)=>{
        setTimeout(() => {
          resolve('縣')
          console.log('縣')
       }, 3000);
      })
      
    },
    async getProvinces(){
      await this.province()
      await this.city()
      await this.country()
    },
  }
}
</script>
<style scoped>

</style>

列印顯示的順序為:省 市 縣