错误SyntaxError：意外的令牌＆lt;在角度6应用程序中JSON.parse（<anonymous>）的位置0的JSON中

Question

我在谷歌搜索过它，是的，我知道收到context/type:text/html而不是application/json，但我没有得到如何解决这个问题。当我试图从我的本地服务器点击第三方用户的api时，我收到此错误。请检查此错误的屏幕截图。

service.ts

    export class VamosysService {
    constructor(private _http:Http){}

    getVechicalLocations():Observable<any[]>{
         return this._http.get(API_URL)
                         .pipe(map((response:Response)=<any[]>response.json()));

}

component.ts

export class VamosysComponent implements OnInit {

  vechicalLocation:any[];

  constructor(private _vamoService:VamosysService) { }
  ngOnInit() {
  this._vamoService.getVechicalLocations()
                        .subscribe((data) => this.vechicalLocation = data);
  }



}

提前致谢

Answer 1

根据你的 STACKBLITZ 。您使用的api无效。如果它已更改为正常工作get api，则表明其工作正常。 WORKING demo with different test api call

而不是使用 Http 我建议您使用HttpClient并获得额外的好处。

  

@ angular / common / http中的HttpClient提供了简化的客户端HTTP   适用于XMLHttpRequest的Angular应用程序的API   浏览器暴露的界面。 HttpClient的其他好处   包括可测试性功能，类型化请求和响应对象，   请求和响应拦截，Observable apis和简化   错误处理。

然后您无需在json内明确解析为map。它也将返回一个可观察的类型。您可以在订阅后使用返回json。

在使用HttpClient之前，您需要导入Angular HttpClientModule（转换为根AppModule）。

示例AppModule代码：

import { NgModule }         from '@angular/core';
import { BrowserModule }    from '@angular/platform-browser';
import { HttpClientModule } from '@angular/common/http';

@NgModule({
  imports: [
    BrowserModule,
    // import HttpClientModule after BrowserModule.
    HttpClientModule,
  ],
  declarations: [
    AppComponent,
  ],
  bootstrap: [ AppComponent ]
})
export class AppModule {}

然后在 HttpClient

中导入VamosysService

import { HttpClient } from '@angular/common/http';

尝试使用 getVechicalLocations() ，如下所示

constructor(private _http: HttpClient) { }

    getVechicalLocations(){
         return this._http.get(API_URL);

    }

希望这对你有所帮助！

Answer 2

您使用已弃用的HttpModule ，您应使用 HttpClientModule 代替 在新的HttpClientModule中，JSON是假设的默认值，不再需要使用res.json()来明确解析 的服务

 import { HttpClient } from '@angular/common/http';
        export class VamosysService {
        constructor(private _httpc:HttpClient){}

        getVechicalLocations():Observable<any[]>{
             return this._httpc.get(API_URL);}

<强>组件

 export class VamosysComponent implements OnInit {

      public vechicalLocation=[];

      constructor(private _vamoService:VamosysService) { }
      ngOnInit() {
      this._vamoService.getVechicalLocations()
                            .subscribe((data) => this.vechicalLocation=data);
      }}

如果您要请求非JSON数据 您可以使用responseType属性。

getVechicalLocations():Observable<any[]>{
                 return this._httpc.get(API_URL,{ responseType: 'text' });}

响应类型可以是responseType?: 'arraybuffer' | 'blob' | 'json' | 'text'

Answer 3

从响应取回字符串时，我遇到了类似的错误。我的错误是：

  

错误：{错误：语法错误：XMLHttp上JSON.parse（）位置0处的JSON中意外的令牌W，文本：“我们刚给您发送了一封电子邮件以重置密码。”}

我无法控制实际响应。但是，我发现this in the documentation专门设置了您可以期待的非JSON响应。所以你会有类似的东西

return this._http.get(API_URL, {responseType: 'text'})        // Notice the additional parameter here
    .pipe(map((response:Response)=<any[]>response.json()));

我注意到您之后也要特别解析json，所以这取决于您对处理方式的实际响应。