乐趣区

关于前端:解决栈溢出的问题

前言

次要报错信息:

ERROR RangeError: Maximum call stack size exceeded

这周次要钻研了栈溢出问题的起因及如何解决。

探索起因

通过控制台的报错信息得悉,因为是反复申请了一个后盾地址导致。然而,这是如何引起的呢。

咱们找到前台申请的相干代码。发现是一个拦截器。拦截器的次要作用是对申请的地址退出 /api/ 前缀。而后在其构造函数下进行打印,发现反复进行了构造函数办法。

猜测可能是哪个局部进行了反复申请造成了反复调用拦截器。
咱们再看看咱们的初始化办法

constructor(private router: Router,  
 private commonService: CommonService,  
 private settingService: SettingService) {this.ngOnInit();  
}  
  
ngOnInit() {this.settingService.findByKey(SettingConst.customerServicePhoneNumber)  
    .subscribe(setting => this.customerServicePhoneNumber = setting.value);  
}

在构造函数里写 ngOnInit 办法是因为这和咱们不同的组件 c 层不同,c 层会初始化时被动调用 ngOnInit 办法。而这里并不会被动调用。

咱们看到 ngOnInit 办法进行了 url 申请,而咱们的拦截器就是在 url 申请的时候拦截器进行了构造函数。
这就在构造函数的 url 申请与申请时进行构造函数之间进行了死循环。当循环的次数越多,就造成了栈溢出。

然而却不是每次 url 申请都会进行构造函数。如果是这样,那就代表着拦截器会每触发一次进行一次死循环。也就是多例模式。

然而通过测试发现,在进入零碎后进行删除老师或者减少老师的申请后盾地址的操作时,并没有进行拦截器的构造函数。
这也就阐明拦截器是单例模式。

了解单例模式与多例模式。
举个例子:咱们在点外卖时会有外卖小哥给咱们配送。单例模式就是我点十次外卖都是一个外卖小哥配送,其他人点外卖也会由他来送。而多例模式就是每点一次外卖就会有一个不同的人来配送,并且每次送外卖的人都不雷同。

在之后的申请时,并没有执行初始化函数,也阐明了没有实例化拦截器这个类,所以这是一个单例模式。然而为什么单例模式下在构造函数中申请时会再次执行构造函数。

解决

在老师的领导下,晓得了其中的起因,在执行拦截器构造函数时,此时是没有拦截器的。零碎在断定没有拦截器后持续进行一个新的实例化。持续进行构造函数,进而造成了死循环。

解决办法就是异步解决

ngOnInit() {setTimeout(() => {this.settingService.findByKey(SettingConst.customerServicePhoneNumber)  
    .subscribe(setting => this.customerServicePhoneNumber = setting.value);}, 0)  
  
}

setTimeout 办法就是对某段代码进行开启一个新的线程并执行。尽管是 0 秒后执行,然而是一个异步执行。
咱们在进行 setTimeout 办法的同时。接着往下执行。执行结束后,也就代表着结构器对象曾经结构好了。当前再次进行申请时,就应用第一次结构好的拦截器。就不会产生死循环问题了。

退出移动版