JSON中的post方法在angular中的位置0处出现意外标记N

Question

我在angular中得到以下错误我的后端是java

SyntaxError：在JSON中，在XMLHttpRequest.onload(http://localhost:4200/vendor.js:10132:51)zoneDelegate.invokeTask(http://localhost:4200/polyfills.js:3626:31)zoneDelegate.invokeTask(http://localhost:4200/vendor.js:73280:33)zoneDelegate.invokeTask(http://localhost:4200/vendor.js:3625:60)zone.runtask：47）在zonetask.invokeTask[as invoke](http://localhost:4200/polyfills.js:3700:34)在invokeTask(http://localhost:4200/polyfills.js:4838:14)在xmlhttprequest.globalzoneawarrecallback(http://localhost:4200/polyfills.js:4875:21)

bank.service.ts

import { Injectable } from '@angular/core';
import { HttpClient } from '@angular/common/http';
import { Observable } from 'rxjs';
import { Bank } from './bank';

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

  private baseurl='http://localhost:8080/';

  constructor(private http:HttpClient) { }

  getAllCustomers():Observable<any>{
    return this.http.get('http://localhost:8080/allbank');
  }

  addCustomer(bank:Bank):Observable<any>{
    console.log(bank)
    return this.http.post(this.baseurl+'bank',bank);
  }

  getCustomer():Observable<any>{
    return this.http.get('{$this.baseurl}/bank/${id}');
  }


}

组件

import { Component, OnInit } from '@angular/core';
import { BankService } from '../bank.service';
import { Bank } from '../bank';
import { FormGroup, FormControl } from '@angular/forms';

@Component({
  selector: 'app-add-customer',
  templateUrl: './add-customer.component.html',
  styleUrls: ['./add-customer.component.css']
})
export class AddCustomerComponent implements OnInit {

  constructor(private bankService:BankService) { }
  bank:Bank=new Bank();
  submitted=false;

  ngOnInit() {
    this.submitted=false;
  }
  banksaveform=new FormGroup({
    bankcustid:new FormControl(),
    bankcustname:new FormControl(),
    bankcustbalance:new FormControl(),
    bankcustpassword:new FormControl()
  })

  saveCustomer(saveCustomer)
  {
    this.bank=new Bank();
    this.bank.cust_id=this.banksaveform.get("bankcustid").value;
    this.bank.cust_name=this.banksaveform.get("bankcustname").value;
    this.bank.cust_balance=this.banksaveform.get("bankcustbalance").value;
    this.bank.cust_password=this.banksaveform.get("bankcustpassword").value;
    this.submitted=true;
    this.save();
  }

  save()
  {
    this.bankService.addCustomer(this.bank)
    .subscribe(data=>console.log(data),error=>console.log(error));
    this.bank=new Bank();
  }

  addCustomerForm()
  {
    this.submitted=false;
    this.banksaveform.reset();
  }

}

Answer 1

当您发出HTTP请求并试图解析响应，但响应不是JSON格式时，就会发生这种情况。

为了查找此bug的来源，您可以做的一些有用的事情是重写json.parse()和XMLHttpRequest.open()方法。

将其放在app.module.ts的顶部，例如：

// Override JSON.parse for debug purposes
(function () {
    var parse = JSON.parse;

    JSON.parse = function (str) {
        try {
            return parse.apply(this, arguments);
        } catch (e) {
            console.log('Error parsing', arguments);
            throw e;
        }
    }
}());


// Override XMLHttpRequest.open
(function() {
    var origOpen = XMLHttpRequest.prototype.open;
    XMLHttpRequest.prototype.open = function() {
        this.addEventListener('load', function() {
            console.log('Http Response', this.responseText, this);
        });
        origOpen.apply(this, arguments);
    };
})();

一旦获得了未解析内容的值，请从覆盖的XMLHttpRequest.open中查找匹配的日志。检查请求，您将看到URL/endpoint是什么。