Question

我可能听起来很笨，但我是angular2的新手。我正在研究离子2的项目，我写了一个具有功能的auth服务 IsEmailAvailable（）用于输入标记上的异步验证。

我无法触发http.post请求。我尝试了很多教程。我知道angular2中的http返回Observable有很多优点。我已经尝试将http.post转换为.toPromise并尝试使用.then。仍然没有进展。

this.http.post(MyApp.BASE_URL+"/api/auth/email",body).map(res => res.json())
         .subscribe(
           res   => {console.warn("some thing")},
           err => { console.error("some bullshit")},
           () =>  {console.log('Authentication Complete')}
         );

编辑1

  public isEmailAvailable(control : Control) {

    return new Promise(resolve => {
      let body =  JSON.stringify({username: control.value});
      console.log(body);
      let headers = new Headers({ 'Content-Type': 'application/json' });
      this.http.post(MyApp.BASE_URL+"/api/auth/email",body).map(res => res.json())
      .subscribe(
        res   => {console.warn("some thing")},
        err => { console.error("some bullshit")},
        () =>  {console.log('Authentication Complete')}
      );
    }); 
  }

编辑2 只是为此添加更多洞察力。我在提供程序中使用此isEmailAvailable函数，并在我的 signup.ts 页面中将其用作异步验证器：

 constructor(private navCtrl: NavController, formBuilder : FormBuilder, 
       public globalVars : GlobalVars, public userData: UserData, public
       authService : AuthService)
{ 

     this.nav = navCtrl;
     this.signUpForm =  formBuilder.group({
     email :  [
        '',Validators.compose([]),authService.isEmailAvailable],
     password: ['',Validators.compose([
           Validators.maxLength(100),   
           Validators.minLength(6),
           Validators.required,
           Validators.pattern(globalVars.getPasswordPattern().toString())])]
     });
}

Answer 1

只需删除Promise.resolve(...)即可：

public isEmailAvailable(control : Control) {

  let body =  JSON.stringify({username: control.value});
  console.log(body);
  let headers = new Headers({ 'Content-Type': 'application/json' });
  return this.http.post(MyApp.BASE_URL+"/api/auth/email",body).map(res => res.json())

  .do(res   => {console.warn("some thing")})
  .catch(err => { console.error("some bullshit"); return Observable.of([err]);})
  .toPromise().then(() =>  {console.log('Authentication Complete')});

确保您已导入所有内容（do，catch，of，toPromise）

Answer 2

无需使用承诺。而且你不想在函数本身内调用.subscribe()。它是应该在函数返回的Observable上订阅的调用代码。我愿意：

public isEmailAVailable(control:Control): Observable<any>{
   let body = ...;
   let headers = ...;
   let options = new RequestOptions();
   options.headers = headers;

   //suppose your server returns TRUE if email is available
   return this.http.post('...', body, headers).map(res => res.json())
            //async validators should return NULL if field is valid
            //or an object with the failure reason
            .map(res => res?null: {'Email is unavailable':true});   
}

顺便说一句，您的原始代码不包含POST请求中的标头。我也已经解决了这个问题。

附录：如果您必须退回承诺，请改用return：

return new Promise ((resolve) => {
    //assumes your server returns TRUE if email is available
    this.http.post(...).map(res => res.json()).subscribe(
        //validator expects NULL when input is valid
        res => res? resolve(null): resolve ({'Email unavailable':true})
    );
});

你可以看到它正常工作in this plunker。输出null时，输入被视为有效。输出对象时，它被认为是无效的。

Answer 3

所以，我最终通过在此服务中手动注入http提供程序，使我的服务正常工作。出于某种原因，在构造函数中设置提供程序引用的常用方法是在我使用

时工作

这不行

http : any;
constructor (httpService : Http)
{
  this.http = httpService;
}

通过这种方式，它无法正常工作

this.http.post在isEmailAvailable（）函数

中

更新： 此工作

isEmailAvailable(control : Control) {

         // Manually inject Http
    let injector = ReflectiveInjector.resolveAndCreate([HTTP_PROVIDERS]);
    let http = injector.get(Http);

    return new Promise(resolve => {
       let body =  JSON.stringify({username:control.value});

       let header = new Headers();
       header.append("Content-Type" , "application/json");

         // HERE I'm using manually injected http 

       return http.post(MyApp.BASE_URL+"/api/auth/email",body,{ headers: header}).map(res => res.json())
           .subscribe(
                res   => {console.warn("some thing")},
                err => { console.error("some bullshit")},
                () =>  {console.log('Authentication Complete')}
            );

 });

无法在angular2提供程序中触发http.post

3 个答案:

this.http.post在isEmailAvailable（）函数