CODEWITHSUNDEEP
angularhttpasynchronous
may
may

Reputation: 79

How do I run asynchronous functions in order in Angular?

I have the following two services and functions:

First one

getData()  {
 return this.http.post(this.base_URL + "web_app/login/", JSON.stringify(this.login))   

.subscribe(response=>{    
   this.access_token = response['access_token'];
   console.log("received token " + this.access_token)
   localStorage.setItem( 'access_token', this.access_token );
   this.access_token = localStorage.getItem('access_token');
   console.log("set cookie value" + this.access_token);

  }

Second one 

farmAccess(){
let headers = new HttpHeaders(); 
this.access_token = localStorage.getItem('access_token');
headers.append('access_token', this.access_token);
console.log("retrieved cookie value" + this.access_token);
return this.http.get(this.baseURL + 'web_app/farm_access/', {headers})
.subscribe(res => console.log(res),)};

I want to run them in this order, because I need the result of the login call to make the farmAccess call. 

ngOnInit(): void{

this.data = this.login.getData();
this.farmAccessdata = this.getFarmAccess.farmAccess();
  }

How can I do this? Thanks!

Upvotes: 1

Views: 67

Answers (1)

Amit Chigadani
Amit Chigadani

Reputation: 29705

Instead of subscribing, map the response from getData().

getData()  {
 return this.http.post(this.base_URL + "web_app/login/", JSON.stringify(this.login))   
            .pipe(map((response) => {    
                  this.access_token = response['access_token'];
                  console.log("received token " + this.access_token)
                  localStorage.setItem( 'access_token', this.access_token );
                  this.access_token = localStorage.getItem('access_token');
                 console.log("set cookie value" + this.access_token);
              }
          ));
}

And in your component file subscribe to getData(). Once the asynchronous data is returned, you can call farmAccess()

ngOnInit(): void{

    this.login.getData().subscribe((data) => {
        this.data = data;
        this.farmAccessdata = this.getFarmAccess.farmAccess();
   });
}

Upvotes: 1

Related Questions