Angular 6：HttpErrorResponse语法错误：JSON中的意外令牌s

Question

我发布了一个请求，预期会收到一个“成功”字符串作为响应。但我得到了一个HttpResponseError，下面的图像中提供了以下信息。 采购订单服务

postPurchaseOrderCustom(purchaseOrderCustom: PurchaseOrderSaveCustom) {
 const url = `${this.localUrl}purchaseOrderCustom`;
 return this.http.post<String>(url, purchaseOrderCustom, {headers: this.header})
            .pipe(
                   catchError(this.handleError('postPurchaseOrderCustom', 'I am an error'))
                 );
  }

PurchaseOrderComponent

this.purchaseOrderService.postPurchaseOrderCustom(purchaseOrderCustom).subscribe( response => {
  console.log("Testing", response);
  },
  error => {
    console.error('errorMsg',error );   
  }

我正在使用的方法与文档中的方法相同。请指出我做错了什么。

- user3701188

---

这是与你的 API 响应相关的 Angular 错误，HTTP 对象默认尝试解析你的 API 响应，如果只是普通文本，就会抛出这个错误。在控制台中尝试执行 JSON.parse('Hi')，如果你不理解我的意思。 - Muhammed Albarmavi

要么在后端将您的响应用引号括起来，要么在前端将responseType更改为'text'。 - user184994

@user184994 在后端中，你所说的用引号包裹是什么意思？它已经被引号包裹了，这使它成为一个字符串。如果我理解正确的话。那么如果你收到一个对象返回会发生什么呢？ - user3701188

是的，但你需要额外加引号，类似于 `""success""。如果你收到一个有效的 JSON 对象，就不会有任何问题，这取决于你说“一个对象”时的意思。 - user184994

@user184994 我正在使用Spring Boot作为我的后端，通常当您发送一个对象时，它会被解析为Json并转换为Angular中相应的对象。如果我没错的话，那么为什么字符串对象与此不同呢？ - user3701188

Answer 1

这与您的 API 响应类型有关，success 不是有效的 JSON 格式。默认情况下，HttpClient 期望 JSON 响应类型并尝试稍后解析它。您可以通过像这样设置响应类型为 text 来解决此问题。

return this.http.post<String>(
    url,
    purchaseOrderCustom,
    { headers: this.header, responseType: 'text' }
)
    .pipe(
        catchError(this.handleError('postPurchaseOrderCustom', 'I am an error')
        ));

- Muhammed Albarmavi

---

在它之前，我必须加上 'json' 才能正常工作，所以如果您可以编辑您的答案，那么我会接受它。 { headers: this.header, responseType: 'text' as 'json' } - user3701188

你是不是加上了 responseType:'json' 才让它工作的？ - Muhammed Albarmavi

这是我所做的 {headers: this.header, responseType:'text' as 'json'})。仅添加文本对我无效。从GitHub上的讨论中得知，人们添加了这个以使其正常工作。 - user3701188

as操作符与TypeScript相关，如果您将其删除，则会起作用，请在TypeScript Playground中尝试此操作http://www.typescriptlang.org/play/index.html，让c = {headers：''，responseType：'text' as 'json'} - Muhammed Albarmavi

Albarmaw，抱歉我不明白你的意思，但是当我移除“as json”时，会出现波浪线错误，并且直到我添加“as json”才能编译。 - user3701188

Answer 2

正如已经提到的那样，这与来自您服务器的响应有关。

在我的情况下，我有一个返回以下内容的Spring Boot应用程序：

"最初的回答"

return new ResponseEntity<>("Your SSN was generated successfully", HttpStatus.OK);

而这是我在Angular端收到的响应：

最初的回答

{error: SyntaxError: Unexpected token Y in JSON at position 0
at JSON.parse (<anonymous>)
at XMLHtt…, text: "Your SSN was registered successfully."}

最初的回答：我在我的 Spring Boot 应用程序中创建了一个自定义的 CustomHttpResponse 类，然后将控制器中的代码更改为以下内容：

所以我做的是，在我的Spring Boot应用程序中创建了一个自定义的CustomHttpResponse类，然后将我的控制器中的代码更改为以下内容：

        ...
        CustomHttpResponse customHttpResponse = new CustomHttpResponse();
        customHttpResponse.setMessage("Your SSN was registered successfully.");
        customHttpResponse.setStatus(HttpStatus.OK.value());

        return new ResponseEntity<>(new Gson().toJson(customHttpResponse), 
                                          HttpStatus.OK);
        }

现在我得到了这个：

最初的回答

。

{message: "Your SSN was registered successfully.", status: 200}
   message: "Your SSN was registered successfully."
       status: 200

本质上，这个错误是因为Angular期望JSON数据，但实际接收到的却是其他类型的数据。最初的回答。

- Ojonugwa Jude Ochalifu

Answer 3

我在获取响应中的PDF数据缓冲区时也遇到了同样的问题，我按照以下方式处理，对我有用。

服务器端

pdf.create(output, options).toBuffer((err: any, buffer: any) => {
            if (err) reject(err);
           response.type('pdf');
response.send(buffer);
        });

在 Angular 服务中，downloadPdf(dateRange, labs) {。

return this.httpClient.post(url, data,{responseType:'blob'});

在 Component.ts 文件中。

downPdf1(){
    this.analyticService.downloadPdf(this.dateRange, this.labs).subscribe(
      res => this.extractPdf(res),
      (error:any) => throwError (error || 'Server error')
  );
  }

 extractPdf(res){
     let myBlob: Blob = new Blob([res], {type: 'application/pdf'}); 
     var fileURL = URL.createObjectURL(myBlob);
     window.open(fileURL);
 }

- Rakesh Pandey