creating a promise within a .then() function to pass along for future use in a different function

Question

creating a promise within a .then() function to pass along for future use in a different function

Currently, I am utilizing a native script firebase plugin that requires the following function:

getCompanyValue() {
     var value;
     firebase.getValue('/companies')
         .then(result => {
             console.log(JSON.stringify(result));
             value = result;
             return result;

         })
         .catch(error => {
             console.log("Error: " + error);
             return error;
         });
     return value;
 }

When importing this function into another file and using it like so:

var companyValue = this.myFirebaseService.getCompanyValue();

The first time I run it, it returns 'undefined', but on subsequent runs, it returns the actual value.

My inquiry is how can I modify the firebase function to return a promise, allowing me to make my second statement wait for its completion?

javascript angular typescript promise

Answer 1

Answer №1

The function in Firebase that you're talking about returns a promise. This is why you can utilize .then and .catch after invoking the getValue function.

If you modify the getValue() function to return the firebase promise, it will look like this:

getValue(){
  return firebase.getValue('/companies');
}

You can then call getValue() at any time, but make sure to execute the code only after the getValue() promise has been resolved. Here's an example:

getValue().then(function(value) {
  console.log(value);
});

If you're having trouble understanding this concept, I recommend learning more about promises here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Answer 2

The function in Firebase that you're talking about returns a promise. This is why you can utilize .then and .catch after invoking the getValue function.

If you modify the getValue() function to return the firebase promise, it will look like this:

getValue(){
  return firebase.getValue('/companies');
}

You can then call getValue() at any time, but make sure to execute the code only after the getValue() promise has been resolved. Here's an example:

getValue().then(function(value) {
  console.log(value);
});

If you're having trouble understanding this concept, I recommend learning more about promises here: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Answer 3

Answer №2

Upon receiving the result from the then block, you can initialize the variable myValue.

Here's an example:

var myValue;

function fetchValue() {
  return firebase.fetchData('/companies');
}

myValue = fetchValue().then(result => {
    const value = JSON.stringify(result);
    console.log(value);
    return value;
  })
  .catch(error => {
    console.log("Error: " + error);
  });
}

Answer 4

Upon receiving the result from the then block, you can initialize the variable myValue.

Here's an example:

var myValue;

function fetchValue() {
  return firebase.fetchData('/companies');
}

myValue = fetchValue().then(result => {
    const value = JSON.stringify(result);
    console.log(value);
    return value;
  })
  .catch(error => {
    console.log("Error: " + error);
  });
}

creating a promise within a .then() function to pass along for future use in a different function

Answer №1

Answer №2

Similar questions

What is the reason behind TypeScript resolving a union type to an empty string in the presence of logical operators?

What are some ways to detect TypeScript type errors in the data of a Vue component?

Filling out a form within a webpage fetched through a DOMParser

Storing JWT securely in cookie or local storage for a Node.js/Angular 2 web application

Can you interact with a node within an Electron application even if the node integration feature is not enabled?

How can a function be properly exported and referenced within a user-defined class using the Ionic/Angular CLI version 5.4.16?

Deactivate a button when clicked on a card that has been mapped

Using Vue to pass an array of rules to a child component

Typescript allows you to apply a filter to an array

How can one ensure that the element declared in the "let" clause is displayed in an HTML Angular template?

AngularJS routing creates a conflict with Express routing

What is the best way to change function.bind(this) to an arrow function in a react native application?

The reactivity of a Vue.js computed property diminishes when it is transmitted through an event handler

Evaluating an angular component with a unique custom form control integrated?

comparing caching with jquery deferred against promise

Using Django to rewrite URLs and transferring a parameter through JavaScript

Failed to send JSON data to WebMethod

Tips for accessing files following the transmission of a post request within the req.body

HTML and CSS site lacking responsiveness

A guide on using Sinon to mock a custom $http transform