Question

我正在尝试从api获取数据，在帖子man中测试我的api everythinh工作正常，我只是想在get / movies结束点显示所有电影回归。这是我到目前为止所做的：

服务组件：

import { Injectable } from '@angular/core';
import { Headers, Http, Response } from '@angular/http';

@Injectable({
  providedIn: 'root'
})
export class MoviesService {

  private apiUrl = 'http://localhost:8000/movies';

  constructor(private http: Http) { }
getMovies(): Promise<any> {
      return this.http.get(this.apiUrl)
                 .toPromise()
                 .then(this.handleData)
                 .catch(this.handleError);
  }
private handleData(res: any) {
       const body = res.json();
       console.log(body); // for development purposes only
       return body || {};
   }
private handleError(error: any): Promise<any> {
     console.error('An error occurred', error); // for development purposes only
     return Promise.reject(error.message || error);
 }
}

这里的组件

就是我所拥有的：

import { Component, OnInit } from '@angular/core';
import { Http } from '@angular/http';
import { Location } from '@angular/common';
import { MoviesService } from '../movies.service';

@Component({
  selector: 'app-movies',
  templateUrl: './movies.component.html',
  styleUrls: ['./movies.component.scss']
})
export class MoviesComponent implements OnInit {
  public movies: any;

  public constructor(private http: Http, private location: Location, private moviesService: MoviesService) {
      this.movies = [];
  }

  ngOnInit(): void {
    this.location.subscribe(() => {
      this.moviesService.getMovies();
  });
  this.moviesService.getMovies();
  }

}

当我运行我的应用程序时，我收到以下错误：

movies.service.ts:24 An error occurred SyntaxError: Unexpected token J in JSON at position 0
    at JSON.parse (<anonymous>)
    at Response.push../node_modules/@angular/http/fesm5/http.js.Body.json (http.js:705)
    at push../src/app/movies.service.ts.MoviesService.handleData (movies.service.ts:19)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:388)
    at Object.onInvoke (core.js:3671)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke (zone.js:387)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.run (zone.js:138)
    at zone.js:872
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3662)
push../src/app/movies.service.ts.MoviesService.handleError @ movies.service.ts:24
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:388
onInvoke @ core.js:3671
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invoke @ zone.js:387
push../node_modules/zone.js/dist/zone.js.Zone.run @ zone.js:138
(anonymous) @ zone.js:872
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
onInvokeTask @ core.js:3662
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:420
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
drainMicroTaskQueue @ zone.js:595
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:500
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
error (async)
customScheduleGlobal @ zone.js:1666
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleEventTask @ zone.js:258
(anonymous) @ zone.js:1831
desc.set @ zone.js:1244
WebSocketTransport @ sockjs.js:2974
SockJS._connect @ sockjs.js:828
SockJS._receiveInfo @ sockjs.js:802
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:567
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
(anonymous) @ sockjs.js:374
g @ sockjs.js:66
EventEmitter.emit @ sockjs.js:86
xhr.onreadystatechange @ sockjs.js:1593
wrapFn @ zone.js:1188
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
invokeTask @ zone.js:1540
globalZoneAwareCallback @ zone.js:1566
XMLHttpRequest.send (async)
scheduleTask @ zone.js:2969
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:255
scheduleMacroTaskWithCurrentZone @ zone.js:1114
(anonymous) @ zone.js:3001
proto.(anonymous function) @ zone.js:1394
AbstractXHRObject._start @ sockjs.js:1601
(anonymous) @ sockjs.js:1490
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
ZoneTask.invoke @ zone.js:485
timer @ zone.js:2054
setTimeout (async)
scheduleTask @ zone.js:2075
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:255
scheduleMacroTaskWithCurrentZone @ zone.js:1114
(anonymous) @ zone.js:2090
proto.(anonymous function) @ zone.js:1394
AbstractXHRObject @ sockjs.js:1489
XHRLocalObject @ sockjs.js:2910
InfoAjax @ sockjs.js:356
InfoReceiver._getReceiver @ sockjs.js:536
InfoReceiver.doXhr @ sockjs.js:556
(anonymous) @ sockjs.js:525
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask @ zone.js:421
push../node_modules/zone.js/dist/zone.js.Zone.runTask @ zone.js:188
push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask @ zone.js:496
ZoneTask.invoke @ zone.js:485
timer @ zone.js:2054
setTimeout (async)
scheduleTask @ zone.js:2075
push../node_modules/zone.js/dist/zone.js.ZoneDelegate.scheduleTask @ zone.js:407
push../node_modules/zone.js/dist/zone.js.Zone.scheduleTask @ zone.js:232
push../node_modules/zone.js/dist/zone.js.Zone.scheduleMacroTask @ zone.js:255
scheduleMacroTaskWithCurrentZone @ zone.js:1114
(anonymous) @ zone.js:2090
proto.(anonymous function) @ zone.js:1394
InfoReceiver @ sockjs.js:524
SockJS @ sockjs.js:730
initSocket @ socket.js:9
(anonymous) @ client?719c:211
./node_modules/webpack-dev-server/client/index.js?http://0.0.0.0:0 @ vendor.js:84316
__webpack_require__ @ bootstrap:76
0 @ main.ts:12
__webpack_require__ @ bootstrap:76
checkDeferredModules @ bootstrap:43
webpackJsonpCallback @ bootstrap:30
(anonymous) @ main.js:1
core.js:1542 ERROR Error: Uncaught (in promise): Unexpected token J in JSON at position 0
    at resolvePromise (zone.js:814)
    at resolvePromise (zone.js:771)
    at zone.js:873
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:421)
    at Object.onInvokeTask (core.js:3662)
    at ZoneDelegate.push../node_modules/zone.js/dist/zone.js.ZoneDelegate.invokeTask (zone.js:420)
    at Zone.push../node_modules/zone.js/dist/zone.js.Zone.runTask (zone.js:188)
    at drainMicroTaskQueue (zone.js:595)
    at ZoneTask.push../node_modules/zone.js/dist/zone.js.ZoneTask.invokeTask [as invoke] (zone.js:500)

重新回答：

SONP_CALLBACK({page: 1, total_results: 364974, total_pages: 18249, results: [,…]})
page
:
1
results
:
[,…]
0
:
{vote_count: 595, id: 351286, video: false, vote_average: 6.7, title: "Jurassic World: Fallen Kingdom",…}
1
:
{vote_count: 2250, id: 383498, video: false, vote_average: 7.7, title: "Deadpool 2",…}
2
:
{vote_count: 6772, id: 284053, video: false, vote_average: 7.4, title: "Thor: Ragnarok",…}
3
:
{vote_count: 4857, id: 299536, video: false, vote_average: 8.4, title: "Avengers: Infinity War",…}
4
:
{vote_count: 1628, id: 338970, video: false, vote_average: 6.2, title: "Tomb Raider",…}
5
:
{vote_count: 11073, id: 135397, video: false, vote_average: 6.5, title: "Jurassic World",…}
6
:
{vote_count: 24, id: 525102, video: false, vote_average: 3.7, title: "Girl Lost",…}
7
:
{vote_count: 9056, id: 297762, video: false, vote_average: 7.2, title: "Wonder Woman",…}
8
:
{vote_count: 6114, id: 284054, video: false, vote_average: 7.3, title: "Black Panther",…}
9
:
{vote_count: 917, id: 348350, video: false, vote_average: 6.8, title: "Solo: A Star Wars Story",…}
10
:
{vote_count: 157, id: 402900, video: false, vote_average: 6.8, title: "Ocean's 8",…}
11
:
{vote_count: 13447, id: 118340, video: false, vote_average: 7.9, title: "Guardians of the Galaxy",…}
12
:
{vote_count: 2070, id: 337167, video: false, vote_average: 6, title: "Fifty Shades Freed",…}
13
:
{vote_count: 39, id: 260513, video: false, vote_average: 6.9, title: "Incredibles 2",…}
14
:
{vote_count: 641, id: 449176, video: false, vote_average: 8.3, title: "Love, Simon",…}
15
:
{vote_count: 9272, id: 10195, video: false, vote_average: 6.7, title: "Thor", popularity: 68.281475,…}
16
:
{vote_count: 0, id: 482560, video: false, vote_average: 0, title: "Covet: The Island of Desire",…}
17
:
{vote_count: 7119, id: 76338, video: false, vote_average: 6.7, title: "Thor: The Dark World",…}
18
:
{vote_count: 849, id: 268896, video: false, vote_average: 5.9, title: "Pacific Rim: Uprising",…}
19
:
{vote_count: 4733, id: 141052, video: false, vote_average: 6.3, title: "Justice League",…}
total_pages
:
18249
total_results
:
364974

我在这里做错了什么？任何帮助将是apreciated

Answer 1

响应不是JSON，而是JSONP。这意味着它不是有效的JSON，因此解析错误。

您正在以返回JSONP的方式调用该软件。如果这是默认的返回类型，则需要将其更改为普通JSON，以便您可以在编码时对其进行解析。如果那是不可能的，也许是因为你不控制后端并且不能添加CORS头，你需要改变你的逻辑以积极地使用JSONP（意味着你创建一个全局函数名称JSONP_CALLBACK - 通常可通过参数配置以允许多个同时呼叫）或解决它。如果使用JSONP是因为API服务器在另一个域上并且没有设置CORS，那么您无能为力。但是如果设置了CORS头或者API端点在同一个域上，你只需使用正则表达式替换函数调用位，只需保留一个可以正常解析的常规JSON对象。

如果你不知道wtf JSONP，你应该阅读this article。它基本上是2010年的黑客，现代浏览器和CORS不再需要它。

Angular通过$http.jsonp()方法内置了对JSONP的支持。如果您需要有关如何使用Angular执行此操作的明确帮助，请参阅this answer。

位于0的JSON中出现意外的标记J.

1 个答案: