How to use fetch in OOP?

Question

I want to start learning OOP and using fetch to GET information. But I am struggling at communicating between Classes. I am unable to GET the information into another Class for further processing.

My Code

Fetch.js

class Fetch  {
    constructor(data) {
        this.data = data;
    }

    async fetchData(path) {
        const res =  await fetch(path)
        const { status } = res;
        if (status <  200  || status >=  300) {
            return  console.log("Oh-Oh! Seite konnte nicht gefunden werden: " + status)
        }
        this.data = res.text();
    }
}

export  default Fetch;

Day08.js

1  | import Fetch from "./Fetch.js";
2  | 
3  | class Day08 extends Fetch  {
4  |    constructor() {
5  |        super(data);
6  |        this.doSomething();
7  |    }
8  | 
9  |   doSomething() {
10 |    console.log(this.data)
11 |    }
12 | }
13 | 
14 | new Day08();

Inside my Console, I then get, that data is not defined in Day08 on line 6.

Question

So the question I have is, how can I use the data I got from the fetch? I also tried writing my doSomething() differently, like so:

doSomething() {
    const fetching =  new  Fetch.fetchData("./Inputs/08-data.txt");
    console.log(fetching)
}

But then I also get that data is not defined. I don't know how to get the information and use it in a different class, I tried to look around online for an answer, but couldn't find one.
The input for fetching changes every time, to get different data. This is why I am trying to avoid making my Fetch Class with a static return. If anyone could help me out with this, that would be great.

Modelling `fetch` as a class has rather big inherent problems. OOP is not just having classes, it's about modelling stuff *through* classes. What does the `Fetch` class even do? It calls `fetch` and does some handling. It's really no different from `fetch.then(/* ... */)` but it's less flexible as you've insulated the promise, which makes the class rather hard to use. A better design would be to allow adding more code that would handle the resolved promise. But that's the same as `.then`. You can expose the promise instead but then, why have a class? — VLAZ, Dec 10 '20 at 11:39

score 2 · Accepted Answer · answered Dec 10 '20 at 12:00

If you want to be able to use the data in other classes that you fetch from the Fetch class than since the fetchData call is async, all of the code that will use the data must be called after the async call is finished in asynchronous manner.

class Fetch {
  async fetchData(path) {
    const res = await fetch(path)

    const {
      status
    } = res;

    if (status < 200 || status >= 300) {
      return console.log("Oh-Oh! Seite konnte nicht gefunden werden: " + status)
    }

    this.data = await res.text();
  }
}

class Day08 extends Fetch {
  constructor(path) {
    super()
    this.path = path;
  }

  async init() {
    await this.fetchData(this.path);
  }

  doSomething() {
    console.log('Something', this.data)
  }

  doSomethingElse() {
    console.log('Else ', this.data)
  }
}

const day = new Day08('https://jsonplaceholder.typicode.com/todos/1')

day.init().then(() => {
  day.doSomething();
  day.doSomethingElse();
})

This worked out great. Do you know of a way where I don't need to use the last lines of code? Like calling the function in the constructor? — Mähnenwolf, Dec 10 '20 at 12:19
Maybe take a look at this question and answer https://stackoverflow.com/questions/43431550/async-await-class-constructor — Nenad Vracar, Dec 10 '20 at 12:20

score 0 · Answer 2 · answered Dec 10 '20 at 11:54

0

Seems like problem is constructor of Day08 must have data param

constructor(data) {
   super(data);
   this.doSomething();
}

answered Dec 10 '20 at 11:54

Ilyas

94
4

How to use fetch in OOP?

My Code

Question

2 Answers2