SyntaxError:JSON.parse:第1行的意外字符:Angular 5 Http调用(Angular JS工作正常)

时间:2018-03-21 04:25:20

标签: json angular http rxjs angular5

我有一个Spring REST服务,它提供一个字节数组。以前我使用的是angularjs 1.使用FileSaver,我可以在HTTP POST调用的响应中下载从REST服务发送的pdf。

现在,我正在将我的更改迁移到angular 5.这是我在服务中的HTTP post调用 -

testPDF(abc: FormArray): Observable<HttpResponse<any>> {
    const options = {
        headers: new HttpHeaders({
            'Content-type': 'application/json',
             'response-type': 'blob'
       })
     }
     return this.http.post<HttpResponse<any>>('/myRestPath', abc, options);
}

在我的组件打字稿文件中,我订阅了这样的内容 -

xyz() {
    this.myService.testPDF(this.abc.value).subscribe((file: any) => console.log('done'));
}

我已经验证了我的REST服务。它返回正确的字节数组。我在互联网上尝试了其他几种解决方法。但似乎没有任何效果。在浏览器控制台中,我可以看到响应,它看起来像是字节流中的PDF。在控制台中,我可以看到收到的3-4 MB大小,这让我相信我已收到数据但无法订阅它。 HTTP响应代码也是200。

默认情况下,尝试将响应作为JSON而不是BLOB获取。由于我的响应不以'{'开头,因此在解析数据时无法解析响应。我不是要求任何人为我编写代码。为了下载PDF文件,我可以使用FileSaver来完成。

我面临的关键问题是我的应用程序没有进入订阅块并执行控制台语句。

1 个答案:

答案 0 :(得分:1)

您似乎在headers上设置了回复类型,但HttpClient希望在responseType的{​​{1}}属性上设置回复类型。

对于options,以下更新将起作用

HttpClient

一个完整的示例,对testPDF(abc: FormArray): Observable<HttpResponse<Blob>> { return this.http.post('/myRestPath', abc, { observe: 'response', responseType: 'blob' }); } 有效,前提是GET目录下有一个名为some.pdf的PDF文件。

assets

对于使用import { Injectable } from '@angular/core'; import { HttpClient, HttpResponse } from '@angular/common/http'; import { Observable } from 'rxjs/Observable'; @Injectable() export class MyNewService { constructor(private http: HttpClient) { } getSomePDF(): Observable<HttpResponse<Blob>>{ return this.http.get('/assets/some.pdf', { observe: 'response', responseType: 'blob' }); } } 的旧版用户,您可以将@angular/http枚举与ResponseContentType

一起使用
import { ResponseContentType } from '@angular/http';

API docs here