angular2 http post 静默失败答案

【问题标题】：angular2 http post failing silentlyangular2 http post 静默失败
【发布时间】：2017-03-21 12:47:47
【问题描述】：

我的前端检查后端是否存在访问者模型。此调用使用邮递员（POST 到 localhost:1337/visitor/exists 和数据：{'email': 'some@email.com'}）。当我尝试让我的 angular2 服务进行相同的调用时，它会默默地失败。

这是我的服务：

@Injectable()
export class MyService {
  private myUrl = 'localhost:1337/visitor/exists';

  constructor(private http: Http) { }

  checkVisitor(email :string): Observable<boolean> {
    console.log('in myservice, checkvisitor; email: ', email); // this outputs

    let headers = new Headers({ 'Content-Type': 'application/json' });
    let options = new RequestOptions({ headers: headers });
    let body = {'email': email};

    console.log('body, ', body); // this also outputs

    return this.http.post(this.myUrl, JSON.stringify(body), options)
      .map(this.extractData)
      .catch(this.handleError);

  }

 private extractData(res: Response) {
    console.log('in service, extractData; res: ', res); // this does not print
    let body = res.json();
    return body || { };
  }

 private handleError (error: Response | any) {
    console.log('in handleError'); // this does not print
    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }
}

为什么我无法从后端获得响应？

我在我的组件中调用它：

constructor(private myService : MyService){
}
...
checkEmailUniqueness(fieldTouched){
    if(fieldTouched){
      this.myService.checkVisitor(this.visitor.email)
    }
  }

【问题讨论】：

你在哪里设置 this.raffleBeUrl？
您可以尝试在您的网址开头添加http:// 吗？
您在开发工具的网络选项卡中得到的响应是什么？
没什么...似乎根本没有打电话。
您订阅checkVisitor() 方法了吗？你在哪里使用它？

标签： angular http rxjs

【解决方案1】：

Observables 默认是“冷”的，你需要subscribe 给它们以“触发”它们。

例子：

this.myService.checkVisitor(this.visitor.email).subscribe((response)=>{
   console.log(response);
})

【讨论】：

太棒了...现在我收到Access-Control-Allow-Origin 错误，但我有 1/2 的预期。谢谢！
@Jeff 很高兴我能帮上忙 :-)

【解决方案2】：

试试这个方法：

 import { Http, Headers, Response, URLSearchParams } from '@angular/http';     

@Injectable()
export class MyService {
  private myUrl = 'localhost:1337/visitor/exists';
private globalHeaders: Headers = new Headers();
  constructor(private http: Http) { }

  checkVisitor(email :string): Observable<boolean> {
    console.log('in myservice, checkvisitor; email: ', email); // this outputs


    let body = {'email': email};

    console.log('body, ', body); // this also outputs

    return this.http.post(this.myUrl, JSON.stringify(body), {headers: this.globalHeaders})
      .map(this.extractData)
      .catch(this.handleError);

  }

 private extractData(res: Response) {
    console.log('in service, extractData; res: ', res); // this does not print
    let body = res.json();
    return body || { };
  }

 private handleError (error: Response | any) {
    console.log('in handleError'); // this does not print
    let errMsg: string;
    if (error instanceof Response) {
      const body = error.json() || '';
      const err = body.error || JSON.stringify(body);
      errMsg = `${error.status} - ${error.statusText || ''} ${err}`;
    } else {
      errMsg = error.message ? error.message : error.toString();
    }
    console.error(errMsg);
    return Observable.throw(errMsg);
  }
}

【讨论】：