【Abp VNext】實戰入門（五）：【10】前端管理界面 vue-element-admin —— 以同步的方式調用接口并獲得傳回結果

一、前言：

正常的作業方式都是在接口調用結果中進行下一步操作，但是這樣做可能會出現，很多層邏輯嵌套使業務變得複雜；

嵌套多了之後 this.xxxMethod() 通路外部的資源屬性或者方法會通路失敗，應該跟vue本身機制有關，通常要在最外層 聲明 let _this =this; 然後在多級内部嵌套中 使用 _this.xxxMethod(); 才能通路；

import Device from '@/business/device.js'
    Device_Load() {
	    Device.GetById(18).then(res => {
             console.log(res)
             //調用其他接口或者方法， 然後方法中調用方法 
             //形成多級嵌套 代碼邏輯複雜  this.也變得不那麼好用了
       })
    }
           

二、解決思路：

采用同步的方式調用接口或者其他方法擷取資料，采用流線型作業的方式去編寫業務邏輯

// 從背景加載裝置資訊到前端
    async Device_Load() {
      
      //1、采用同步的方式等待接口傳回結果
      const res = await this.$Api.Device.GetById(18).then(res => {
        return res
      })
      //隻有等到上面傳回後才會列印輸出res  
      //如果沒有 async  await 此處不會等待直接輸出：undefined
      console.log(res); 
      //2、拿到結果後進行後續相關的功能：有效避免多級嵌套  簡化代碼邏輯 
    }
           

三、總結：

1、思維方面：減少代碼嵌套、簡化業務邏輯

2、技術方面：借助 async await 功能來解決問題