如何在 OOP 中使用 fetch？

Question

我想开始学习 OOP 并使用 fetch 来获取信息。但是我在班级之间的交流方面很挣扎。我无法将信息获取到另一个类以进行进一步处理。

我的代码

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();

在我的控制台中，我在第 6 行第 8 天得到 data is not defined。

问题

所以我的问题是，我如何使用从获取中获得的数据？ 我还尝试以不同的方式写我的doSomething()，如下所示：

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

但是我也得到那个数据没有定义。 我不知道如何获取这些信息并在不同的课程中使用它，我试图在网上四处寻找答案，但找不到答案。
每次获取的输入都会改变，以获取不同的数据。这就是为什么我试图避免使用静态返回来创建我的 Fetch 类。 如果有人能帮我解决这个问题，那就太好了。

Answer 1

如果您希望能够使用从 Fetch 类中获取的其他类中的数据，而不是因为 fetchData 调用是异步的，则必须在异步之后调用所有将使用数据的代码调用以异步方式完成。

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();
})

Answer 2

似乎问题是 Day08 的构造函数必须具有 data 参数

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