0

I'm trying to use the data returned by a single fetch request in multiple modules that consume that data. Basically, what I have now is an API returns some JSON that will be used to populate a dropdown list of items and also used to get additional information associated with an item when a user makes a selection from that dropdown.

I have 3 modules: One that exports a function that makes the fetch request and returns a promise, and the two others that import that function and use the promise.then() syntax to populate the appropriate variables using callbacks when it resolves. This makes it so there are two fetch requests made when the application runs.

Sorry if this is a newbie question, is there a way to make a single fetch request and consume the returned data in multiple modules when it resolves?

Appreciate any help

gubawhips
  • 65
  • 5
  • yes, you can use the data returned by a single fetch multiple times - hope that helps – Bravo Nov 05 '18 at 20:37
  • It's called promise chaining. – Iskandar Reza Nov 05 '18 at 20:38
  • Make the request immediately and export the promise, not the function. Or just [cache the result promise](https://stackoverflow.com/a/18745499/1048572) if you still want to do it lazily. – Bergi Nov 05 '18 at 21:02

1 Answers1

0

API call is made by some function, and you need to call function ever time you need some operation for example:

API callFile.js:

function randomNumbers() {
    let num = parseInt(Math.random()*10000);  // In place of API fetch call just to simulate.
    return num; 
}

Now if this same random number generated is needed in different location then need to save it some where else wont be able to access it and ever call will have a different number.

part of API callFile.js:

class Storage {
    constructor() {
        this.num;
    }
    getNumber() {
        if(this.num)
           return this.num;

        this.num = randomNumbers();
        return this.num;
    }
}

module.exports = new Storage();

first.js:

let Storage = require('callFile');

function one() {
    let num = Storage.getNumber();
}

second.js:

let Storage = require('callFile');

function two() {
    let num = Storage.getNumber();
}

By making such class you get same data everywhere and API is called only singe time. If needed to reset or call API again then can even pass some element to empty storage and call API again.

NAVIN
  • 3,193
  • 4
  • 19
  • 32
  • [Do not use `class` syntax for singleton module objects](https://stackoverflow.com/q/38739499/1048572). – Bergi Nov 05 '18 at 22:22
  • The idea is to just save it some where to reuse again in future. – NAVIN Nov 05 '18 at 22:59
  • Sure, but you don't need a `class` for that. Keep it simple. – Bergi Nov 06 '18 at 07:23
  • Still having same issue w/ class syntax `export default class Premiums { constructor() { this.premiums = null; } static premiumsPromise() { if (this.premiums) { console.log("existing data returned!"); return this.premiums; } const premiums = fetch(url); return premiums .then(data => data.json()) .then(data => { this.premiums = data; return data; }); } }` When I import the class with this syntax into two modules const premiumsList = Premiums.premiumsPromise() still making two fetch requests. – gubawhips Nov 09 '18 at 18:10
  • I'm not sure what you have done here. Just keep it simple try with some dummy data. There must be some problem how you care handling API call. ` return premiums .then(data => data.json()) .then(data => { this.premiums = data; return data; });` Please share code in question edit. It's difficult to debug here. – NAVIN Nov 09 '18 at 18:21