如何在 OOP 中使用 fetch？

Question

我想开始学习 OOP 并使用 fetch 来获取信息。但我在班级之间的沟通上遇到了困难。我无法将信息获取到另一个类中以进行进一步处理。我的代码Fetch.jsclass 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.js1  | 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();data is not defined在我的控制台中，我在 Day08 的第 6 行得到了这一点。问题所以我的问题是，如何使用从获取中获得的数据？我也尝试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 的构造函数必须有数据参数

constructor(data) {

   super(data);

   this.doSomething();

}