ОШИБКА SyntaxError: Неожиданный токен <в JSON в позиции 0 в JSON.parse (<anonymous>) в приложении angular 6

Question

Я искал об этом в Google, да, я понял, что получаю 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()));

}

компонент.ts

export class VamosysComponent implements OnInit {

  vechicalLocation:any[];

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



}

Заранее спасибо

Answer 1

Вы используете 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 2

У меня была похожая ошибка при получении строки из ответа.Моя ошибка:

ошибка: {ошибка: SyntaxError: неожиданный токен W в JSON в позиции 0 в JSON.parse () в XMLHttp…, текст: «Мы только что отправили вам электронное письмо насбросьте свой пароль. "}

И я не могу контролировать фактический ответ.Тем не менее, я нашел это в документации , которая специально устанавливает, что вы можете ожидать не-JSON ответов.Таким образом, у вас будет что-то вроде

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

Я заметил, что вы также специально разбираете json после этого, так что это будет зависеть от фактического ответа от того, как вы хотите с этим справиться.

Answer 3

По вашему STACKBLITZ . api , который вы использовали, не работает должным образом.Если он изменился на рабочий get api, то вызов работает нормально. РАБОЧАЯ демоверсия с другим тестом api вызов .

и вместо использования Http я предлагаю вам использовать HttpClient с дополнительными преимуществами.

HttpClient в @ angular / common / http предлагает упрощенный клиентский HTTP-API для приложений Angular, который опирается на интерфейс XMLHttpRequest, предоставляемый браузерами.Дополнительные преимущества HttpClient включают в себя функции тестируемости, типизированные объекты запросов и ответов, перехват запросов и ответов, наблюдаемые 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);

    }

Надеюсь, это поможет вам!