Question

Angular 2与Codeigniter Hello World程序运行完美。但从Angular 2向Codeigniter Controller“Entry.php”发送Http get请求时，我收到错误“JSON输入的意外结束” 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 string，则会出现错误。在执行res之前，只需检查res.json()的值，您就不会收到错误消息。为了确保这一点，在尝试解析它之前创建一个console.log(res)。

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

2 个答案: