如何在@ngrx/effects中处理非JSON数据？请求文本解析失败

这个问题的核心在于Angular HttpClient默认会自动把响应体解析为JSON，而你的接口返回的是纯文本（Access或NON_ACCESS），所以它尝试用JSON.parse解析时就会抛出语法错误，直接进入catch分支触发失败动作。

解决方案：明确指定响应类型为文本 #

你需要在HTTP请求中添加responseType: 'text'选项，告诉HttpClient不要自动解析JSON，直接返回原始文本。

1. 修改API服务代码

更新getNonJsonData方法，添加响应类型配置：

getNonJsonData(): Observable<string> {
  // 设置responseType后，TypeScript会自动推导返回值为Observable<string>
  return this.http.get('my_http_url', { responseType: 'text' });
}

注意：这里不需要显式指定<string>泛型，因为当responseType设为'text'时，HttpClient会自动匹配正确的返回类型，类型推导是准确的。

2. 确认Effects代码无需额外修改

你的Effects逻辑本身没有问题，只要API返回正确的文本流，.map(getNonJsonDataFulfilled)就能正常接收字符串并触发成功动作：

@Effect() getNonJsonData = () => this.actions
  .ofType<GetNonJsonAction>(GET_NON_JSON_DATA)
  .switchMap(() => this.api
    .getNonJsonData()
    .map(getNonJsonDataFulfilled)
    .catch(error => Observable.of(getNonJsonDataRejected(error)))
  )

为什么之前的写法会失败？ #

即使你给http.get<string>()指定了泛型，HttpClient的默认行为仍然是把响应当作JSON来解析。泛型只是TypeScript层面的类型声明，不会改变实际的解析逻辑。当响应是纯文本时，JSON解析器遇到非JSON格式的字符（比如开头的'A'）就会抛出SyntaxError，进而触发catch分支。

这样修改后，HttpClient会直接返回原始文本字符串，不会进行JSON解析，你的Effects就能正常处理成功响应了。

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