Http中的JSON输入意外结束从Angular 2获取请求到Codeigniter

Question

Codeigniter Hello World程序的Angular 2运行完美.但是我发送错误"JSON输入的意外结束",同时从Angular 2向Codeigniter Controller发送Http get请求"Entry.php"Plunker代码在此链接:

https://plnkr.co/edit/MHVVkWwFqEggqSI5b6B2?p=info

同样的代码也粘贴在这里:app.module.ts

import { NgModule }            from '@angular/core';
import { BrowserModule }       from '@angular/platform-browser';
import { HttpModule } from "@angular/http";
import { AppComponent }        from './app.component';
import { EntryService }        from './entry.service';

@NgModule({
  imports: [
    BrowserModule,
    HttpModule
  ],
  declarations: [
    AppComponent
  ],
  exports: [ // export for the DemoModule
    AppComponent
  ],
  providers: [ EntryService], 
  bootstrap: [ AppComponent ]
})
export class AppModule { }

app.component.ts

import { Component, OnInit} from '@angular/core';
import { EntryService} from './entry.service';

@Component({  
  selector: 'my-app',
  template: `
      <h3>{{ errorMsg }} </h3>      
      <ul>
          <li *ngFor="let s of scripts">{{ s.price }}</li>
      </ul>
  `,
})

class formEntry{  
  constructor(price: number, qty: number){}    
}
export class AppComponent implements OnInit{

    errorMsg: string;
    data: formEntry;
    constructor(private _entService: EntryService) { }

    ngOnInit()
    {
        console.log('In OnInit: ');        
        this._entService.getData()
            .subscribe(data => this.data = data,
                        resError => this.errorMsg = resError);            
    }
}

entry.service.ts

import { Injectable } from '@angular/core';
import { Http, Headers, Response}  from '@angular/http';
import { Observable } from 'rxjs/Observable';
import 'rxjs/add/operator/catch';
import 'rxjs/add/operator/map';
import 'rxjs/add/observable/throw';

@Injectable()
export class EntryService { 

     constructor(private _http: Http) { } 

     getData(){

        let myUrl = 'http://localhost/analy/entry/getData';
        return this._http.get(myUrl)
            .map((res: Response ) => res.json())
            .catch(this._errorHandler);
      } 
      _errorHandler(error: Response){
          console.error(error);
          return Observable.throw(error || "Server Error");
      }
}

Entry.php

class Entry extends CI_Controller
{
    function __construct()
    {
        parent::__construct();      

        header('Access-Control-Allow-Origin: *');
        header('Access-Control-Allow-Headers: X-Requested-With');
        header('Access-Control-Allow-Methods: POST, GET, OPTIONS');
    }

    function getData(){
        $data = array('price' => 999,
               'qty' => 8);                
        $jdata = json_encode($data);                       
        return ($jdata);
    }
}

我正在使用webpack 2.代码不在plnkr上工作,而是在我的系统上.但它对mydata.json文件工作得很好,但是对于"entry/getData"(来自entry.service.ts)的get请求给出了错误.getData是Entry.php控制器中的方法.

什么可能的原因和可能的解决方案.. ??? 请任何人可以帮我解决问题.

Answer 1

当我升级为使用来自@ angular/common/http的新HttpClient时,刚刚遇到角度4的问题

HttpClient的有趣之处在于它会自动在您的响应上运行.json().当api返回空响应时,这会导致问题.然后,您将获得json错误的意外结束.解决方案是将responseType设置为text:

http.get(url, { responseType: 'text' })

Answer 2

您正在尝试将空值解析为JSON

return this._http.get(myUrl)
        .map((res: Response ) => res.json())
        .catch(this._errorHandler);

如果res为null / undefined / empty字符串，则会收到错误消息。只需res在执行之前检查的值，res.json()就不会收到错误。为了确保这一点，请console.log(res)在尝试对其进行分析之前先进行“ a”操作。