一、前言:
常规的作业方式都是在接口调用结果中进行下一步操作,但是这样做可能会出现,很多层逻辑嵌套使业务变得复杂;
嵌套多了之后 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 功能来解决问题