Using Angular's async, you can retrieve a value returned by a promise

Question

Using Angular's async, you can retrieve a value returned by a promise

Within the library I am currently utilizing, there is a method called getToken which can be seen in the following example:

getApplicationToken() {
    window.FirebasePlugin.getToken(function(token) {
      console.log('Received FCM token: ' + token);
    }, function(error) {
      console.log('Failed to retrieve FCM token', error);
    });
  }

My goal is to create a method that directly returns the token itself. Here is what I have attempted:

async getApplicationTokenString(): Promise<string> {
    return window.FirebasePlugin.getToken();
}

I then call this method using:

let firebaseToken = '';
this.fireBaseService.getApplicationTokenString().then(function(resolveOutput) {
   firebaseToken = resolveOutput;
  }, function(rejectOutput) {
    console.log(rejectOutput);
  });

Unfortunately, I only receive an output of Firebase token:, without any actual value. However, when I use getApplicationToken, the FCM token is successfully logged.

How can I properly handle and pass the value obtained from an asynchronous promise?

javascript angular typescript

Answer 1

Answer №1

Enclose the code within a Promise and trigger the resolver when the token becomes accessible

 fetchApplicationToken() {
        return new Promise((resolve, reject) => {
            window.FirebasePlugin.getToken(function(token) {
                console.log('Received FCM token: ' + token);
                resolve(token);
            }, function(error) {
            console.log('Failed to retrieve FCM token', error);
            });
        });
      }

Insert an await operator to pause execution until a Promise is fulfilled

 async processApplicationTokenString(): Promise<string> {
    let token =  await this.fetchApplicationToken();
    console.log(token); // your token will be accessible at this point
    this.firebaseToken = token;
    console.log('This line won't execute until the promise is resolved');
  }

Answer 2

Enclose the code within a Promise and trigger the resolver when the token becomes accessible

 fetchApplicationToken() {
        return new Promise((resolve, reject) => {
            window.FirebasePlugin.getToken(function(token) {
                console.log('Received FCM token: ' + token);
                resolve(token);
            }, function(error) {
            console.log('Failed to retrieve FCM token', error);
            });
        });
      }

Insert an await operator to pause execution until a Promise is fulfilled

 async processApplicationTokenString(): Promise<string> {
    let token =  await this.fetchApplicationToken();
    console.log(token); // your token will be accessible at this point
    this.firebaseToken = token;
    console.log('This line won't execute until the promise is resolved');
  }

Using Angular's async, you can retrieve a value returned by a promise

Answer №1

Similar questions

"Improve text visibility on your website with Google PageSpeed's 'Ensure text remains visible' feature, potentially saving you

Is there a workaround for utilizing reducer dispatch outside of a React component without relying on the store?

Is there a method in Vuejs to choose a tab and update components simultaneously?

npm not only loads the packages specified in my package.json file

Injecting properties into higher order functions in Typescript allows for the dynamic customization

The display of temporary headers - Nodemailer - AJAX

Sequelize associations are not functioning optimally as expected

What is the easiest way to clear browser cache automatically?

What is the best way to transfer a property-handling function to a container?

Is it possible to convert an object with properties of equal length into a list of objects using JavaScript?

Is it possible to have unique color tags in Material UI Autocomplete?

Is there a way to eliminate the blue border from a Material React Modal?

Simple integration of JSP, JSON, and AJAX

Determine whether an input is currently in a "checked" state

the status of timers across various servers

Utilize Typescript Functions to Interact with GeoJSON Data in Palantir Foundry

Verify the login details of a distant website using Angular

The functions getFiles and getFolders will consistently retrieve a single file or folder each time they are

unable to make a request to the express server with axios

Dealing with performance issues in React Recharts when rendering a large amount of data