angular2 webapi调用异步不起作用答案

【问题标题】：angular2 webapi call async not workingangular2 webapi调用异步不起作用
【发布时间】：2017-08-20 09:44:19
【问题描述】：

我有一个带有类和方法的 Angular 2app，该方法执行 Web api 调用，然后在本地存储上设置一些项目，问题是因为它的 ASYNC 然后在下一行我没有本地存储值然而，因为当时 web api 还没有返回任何信息。

如何确保 web api 在 localstorage.getitem 行之前成功返回。

为简洁起见减少代码。

服务

 login(email) {
        let params: URLSearchParams = new URLSearchParams();
        params.set('email', email);

        //Header
        let headers = new Headers({
            'Content-Type': AppSettings.ContentType,
            'Authorization': AppSettings.Authorization + localStorage.getItem("AccessToken"),
            'X-Developer-Id': AppSettings.XDeveloperId,
            'X-Api-Key': AppSettings.XApiKey
        });

        var RequestOptions: RequestOptionsArgs = {
            url: AppSettings.UrlLoginPatient,
            method: 'GET',
            search: params,
            headers: headers,
            body: null
        };

        this.http.get(AppSettings.UrlLoginPatient, RequestOptions)
            .map(res => res.json())
            .subscribe(
            data => { this.saveData(data, email); },
            err => this.Error(err)
            );
    }

    saveData(data, email) {
        localStorage.setItem('patientId', data.data.patientId);
        localStorage.setItem('emailLogin', email);
    }

    Error(err) {
        console.log('error: ' + err);
    }

组件

LoginApp() {

    this.login.login('a@com.com');

    if (localStorage.getItem("patientId") != null) {
      this.navCtrl.push(AttentionTypePage);
    } else {
      let alert = this.alertCtrl.create({
        subTitle: 'El correo electrónico no ha sido encontrado.',
        buttons: ['Intentar nuevamente']
      });
      alert.present();
    }
  }

【问题讨论】：

我不明白你的代码是一个类还是两个分开的？
它的 2 个独立的类
好的，所以第一部分是您的服务，第二部分是您的组件，对吧？
没错，我只是不想粘贴整个代码。
您必须从 login 方法返回一个 observable，这样您就可以订阅它并在获得结果时运行其余代码。

标签： angularjs angular typescript asp.net-web-api

【解决方案1】：

为确保您拥有正确的信息，您不应订阅您的服务，而应订阅您的组件：

服务

login(email) {
  //do stuff with headers, and request options
  return this.http.get(AppSettings.UrlLoginPatient, RequestOptions)
    .map(res => res.json())
    .do(data => this.saveData(data, email));
}

组件

LoginApp() {
  this.login.login('a@com.com').do(data => {
    if (localStorage.getItem("patientId") != null) {
      this.navCtrl.push(AttentionTypePage);
    } else {
      let alert = this.alertCtrl.create({
        subTitle: 'El correo electrónico no ha sido encontrado.',
        buttons: ['Intentar nuevamente']
      });
      alert.present();
    }
  }).subscribe();
}

【讨论】：