如何在 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();

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 {&nbsp; async fetchData(path) {&nbsp; &nbsp; const res = await fetch(path)&nbsp; &nbsp; const {&nbsp; &nbsp; &nbsp; status&nbsp; &nbsp; } = res;&nbsp; &nbsp; if (status < 200 || status >= 300) {&nbsp; &nbsp; &nbsp; return console.log("Oh-Oh! Seite konnte nicht gefunden werden: " + status)&nbsp; &nbsp; }&nbsp; &nbsp; this.data = await res.text();&nbsp; }}class Day08 extends Fetch {&nbsp; constructor(path) {&nbsp; &nbsp; super()&nbsp; &nbsp; this.path = path;&nbsp; }&nbsp; async init() {&nbsp; &nbsp; await this.fetchData(this.path);&nbsp; }&nbsp; doSomething() {&nbsp; &nbsp; console.log('Something', this.data)&nbsp; }&nbsp; doSomethingElse() {&nbsp; &nbsp; console.log('Else ', this.data)&nbsp; }}const day = new Day08('https://jsonplaceholder.typicode.com/todos/1')day.init().then(() => {&nbsp; day.doSomething();&nbsp; day.doSomethingElse();})

Answer 2

似乎问题是 Day08 的构造函数必须有数据参数constructor(data) {&nbsp; &nbsp;super(data);&nbsp; &nbsp;this.doSomething();}