【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 功能来解决问题