How to synchronise Angular2 http get? How to synchronise Angular2 http get? angular angular

How to synchronise Angular2 http get?


your service class: /project/app/services/sampleservice.ts

    @Injectable()    export class SampleService {      constructor(private http: Http) {      }      private createAuthorizationHeader() {         return new Headers({'Authorization': 'Basic ZXBossffDFC++=='});      }      getAll(): Observable<any[]> {        const url='';        const active = 'status/active';        const header = { headers: this.createAuthorizationHeader() };        return this.http.get(url + active, header)          .map(            res => {              return res.json();            });      }    }

your component: /project/app/components/samplecomponent.ts

export class SampleComponent implements OnInit  {  constructor(private sampleservice: SampleService) {  }  ngOnInit() {   this.dataset();  }  dataset(){    this.sampleservice.getAll().subscribe(      (res) => {        // map Your response with model class        // do Stuff Here or create method         this.create(res);      },      (err) => { }    );  }  create(data){   // do Your Stuff Here  }}


enter image description hereBy looking at the angular source (https://github.com/angular/angular/blob/master/packages/http/src/backends/xhr_backend.ts#L46), it is apparent that the async attribute of the XMLHttpRequest is not getting used. The third parameter of XMLHttpRequest needs to be set to "false" for synchronous requests.


Please find code for your problemBelow is component and service file.And Code is Working fine for synchornize

import { Component, OnInit } from '@angular/core';import { LoginserviceService } from '../loginservice.service';@Component({  selector: 'app-login',  templateUrl: './login.component.html',  styleUrls: ['./login.component.css']})export class LoginComponent implements OnInit {  model:any={};  constructor(private service : LoginserviceService) { }ngOnInit() {}save() {   this.service.callService(this.model.userName,this.model.passWord).   subscribe(      success => {        if(success) {            console.log("login Successfully done----------------------------    -");            this.model.success = "Login Successfully done";     }},    error => console.log("login did not work!")  ); }}

Below is service file..

import { Injectable } from '@angular/core';import { Http } from '@angular/http';import { UserData } from './UserData';import 'rxjs/add/operator/map'import 'rxjs/add/operator/toPromise'import {Observable} from 'rxjs/Rx'@Injectable()   export class LoginserviceService {   userData = new UserData('','');      constructor(private http:Http) { }    callService(username:string,passwrod:string):Observable<boolean> {     var flag : boolean;           return (this.http.get('http://localhost:4200/data.json').       map(response => response.json())).        map(data => {          this.userData = data;          return this.loginAuthentication(username,passwrod);        });      }  loginAuthentication(username:string,passwrod:string):boolean{     if(username==this.userData.username && passwrod==this.userData.password){        console.log("Authentication successfully")        return true;   }else{     return false;   }  }}