Angular中使用SSE调用API时this指向错误致addAsArray调用失败

错误原因 #

你遇到的TypeError: Cannot read properties of undefined (reading 'addAsArray')和异步函数是否加await无关，核心问题是**onmessage回调里的this指向错误**。

在fetchEventSource的配置对象中，onmessage作为独立的异步函数，它内部的this默认指向配置对象（严格模式下甚至是undefined），而非你定义addAsArray方法的上下文（比如类实例、Vue组件实例等）。

解决方案 #

以下几种方式可以修正this的指向：

1. 使用箭头函数 #

箭头函数会继承外层作用域的this，直接修改onmessage的定义形式：

let src = fetchEventSource('api link', {
  method: 'POST',
  // ...其他配置项
  onmessage: async (e) => {
    if(e.text.includes('[END]')){
      await this.addAsArray(e.text)
    }
  }
})

2. 提前保存正确的this #

在配置对象外把正确的上下文保存到变量中，回调里用这个变量替代this：

const that = this;
let src = fetchEventSource('api link', {
  method: 'POST',
  // ...其他配置项
  async onmessage(e){
    if(e.text.includes('[END]')){
      await that.addAsArray(e.text)
    }
  }
})

3. 用bind绑定this #

通过Function.prototype.bind方法，把回调函数的this强制绑定到正确的上下文：

let src = fetchEventSource('api link', {
  method: 'POST',
  // ...其他配置项
  onmessage: async function(e){
    if(e.text.includes('[END]')){
      await this.addAsArray(e.text)
    }
  }.bind(this)
})

另外补充：你的addAsArray方法里的array如果是实例属性，建议加上this.（即this.array.push(message)），避免出现变量未定义的额外问题。

内容的提问来源于stack exchange，提问作者user3774763