解决Angular的HTTP接口调用被canceled的问题

最近测试同学发现，有些接口调用会出现罕有的canceled的情况：

刚开始还百思不得其解，仔细琢磨代码逻辑也无太大问题。后来发现，此接口是在某组件事件触发后立马调用的，猜想可能问题出在这里：

<some-comp (archUpdate)="onArchUpdate($event)"></some-comp>

class SomeComp {
  onArchUpdate(e: any): void {
    // 获取参数后立马调用进行操作
    await ApiService.req('scanArchOCR', e)
  }
}

后来增加一个setTimeout解决此问题了

class SomeComp {
  onArchUpdate(e: any): void {
    // 增加setTimeout解决部分情况下接口调用被canceled的问题
    setTimeout(() => {
      // 获取参数后立马调用进行操作
      await ApiService.req('scanArchOCR', e)
    })
  }
}

或者在事件触发那里增加setTimeout解决也可以，机制是相同的。

虽然解决方法是有了，但背后的原因和原理还未梳理清楚，也欢迎广大朋友指点和解惑。

PS：这个setTimeout大法貌似在Angular框架里还是被用得挺多了，甚至它们官方网站教程在解决某些问题时，也推荐我们使用这个。好像有点不严谨...-_- ||