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

The NgSwitch is behaving unexpectedly, throwing an exception with the message "No provider for NgSwitch"

What is causing the loss of data when attempting to access an array field within an object?

Is there a way to see the default reactions in a browser when keyboard events such as 'tab' keydown occur?

Unit Testing Angular Components with Karma and Jasmine: Exploring Test Scope

How can the outcome of the useQuery be integrated with the defaultValues in the useForm function?

``I'm having trouble getting the onchange event to function properly in a customized

There is an issue with the function of elem.autocomplete - it is not recognized

Create a custom Android home screen widget using JavaScript or another programming language

The process of deleting lines from an image using Javascript

Does it make sense to start incorporating signals in Angular?

A guide to eliminating duplicate values within an array and across multiple arrays with the help of jQuery

OpenAPI implementation in NestJS that emphasizes the use of reusable parameters

Utilizing JSON in a d3.js application within a Rails environment

Is it possible to automatically correct all import statements in a TypeScript project?

Tips for transforming an array of images (from an input field) into a JSON string

Having trouble displaying a set of data points in a React component

How can I manage the asynchronicity of Hapi.js, fs.readFile, fs.writeFile, and childProcess.exec?

RTK update mutation: updating data efficiently without the need to refresh the page

Stopping autoplay in Swiper as soon as you hover over it

Displaying an interactive 2D floorplan in a web browser with the use of html5 and javascript