在JS类中处理异步数据

Question

目标：我想建立一个解决新闻接口并在视图中呈现数据的类。 我的类（myNews）有几种方法，一种方法是fetchnews（）。在这种方法中，我从API获取数据。来自API的数据应在类Varaible（News）中分配。在另一种方法中（exhingews（）），我想访问数据以迭代它。

我的问题：我是JS的初学者，我想知道如何查询数据。从我的理解来看，流是这样的： 构造函数调用fetchnews Fetch News首先得到承诺，等到解决诺言得到解决 然后将数据分配给会员 但是JS Async正在运行JS，此时不再等到承诺得到解决，并且继续使用空数组。这正是我的问题。

问题我需要做什么或更改以正确获取数据。这样我就可以构建一个HTML列表。

我的JS代码

class MyNews {
  news = [];
  
  apiUrl = "https://jsonplaceholder.typicode.com/posts";
  
  constructor() {
    this.news;
    this.fetchNews();
  }
  
  fetchNews() {
    fetch(this.apiUrl)
      .then(async (data) => {
        this.news = await data.json(); 
        console.log("A:",this.news.length); // i have results
      })
      .catch((err) => {
        console.log(err)
      });
                // ...
  }
  
  showNews() {
    console.log("B:",this.news.length); // empty array
    
    return this.news;
  }
}
    

n = new MyNews;
console.log("C:", n.showNews().length );

Answer 1

几个问题：

1. 首先是fetchnews是一个异步过程。在您的示例中，显示的将始终为0，因为fetchnews在调用eashingews时尚未获取任何内容。我们可以通过将这些方法的调用在班级外移动来减轻其中的一些。

2. 您有fetch和async/等待的奇数混合物 - 最好坚持一个或另一个。

class MyNews {

  apiUrl = 'https://jsonplaceholder.typicode.com/posts';

  // `async/await` function - fetches the JSON, and
  // sets the `news` field to the parsed JSON
  async fetchNews() {
    try {
      const response = await fetch(this.apiUrl);
      if (response.ok) this.news = await response.json();
    } catch (err) {
      this.error = err.message;
    }
  }
  
  formatNews() {
    return this.news.map(n => {
      return `<p>${n.title}</p>`;
    }).join('');
  }
  
  // Return the news or the error if there was one.
  showNews() {
    if (!Array.isArray(this.news)) return this.error;
    return this.formatNews();
  }

}

// Piecing it together we create a new
// object, call and `await` `fetchNews` and
// then call `showNews`
async function main() {
  const myNews = new MyNews();
  await myNews.fetchNews();
  document.body.innerHTML = myNews.showNews();
}


main();

p { border: 1px solid #787878; padding: 0.3em; border-radius: 5px; margin: 0.2em; text-transform: capitalize; }
p:hover { cursor: pointer; background-color: #ffffd0; }

Answer 2

问题在于fetch（）是一个异步函数。这就是实际发生的事情：

1. 构造函数称为
2. fetchnews是启动
3. 的构造函数，这可能是在FetchNews
4. doadeews可能运行之前就

完成的构造函数。但是，这并不能完全解决您的问题，因为构造函数不能成为异步功能。

我建议使用此解决方案：

将fetchnews的呼叫移至myNews类上的init方法，并将其变为异步。

class MyNews {
    ...
    async fetchNews() {
        await fetch(...);
    }
    ...
    async init() {
        await fetchNews();
    }
    ...
}
const news = new MyNews();
await news.init();
news.showNews();

您可以在

顺便说一句：this.news;似乎不必要。

Answer 3

我建议将getandshownews（）函数添加到您的课程中。

然后，我们将确保从fetchnews（）提取呼叫中返回承诺，因此我们可以在另一个异步函数中等待等待。

在getandShownews（）函数中，我们将等待fetchnews（）结果（承诺），这将确保填充新闻项目。
然后，我们将通过循环浏览每个项目来展示新闻。

您可以在班级以外的功能中执行此操作，但是在班上这样做似乎很有意义。

class MyNews {
  news = [];
  
  apiUrl = "https://jsonplaceholder.typicode.com/posts";
  
  constructor() {
    this.fetchNews();
  }
  
  fetchNews() {
    return fetch(this.apiUrl)
      .then(async (data) => {
        this.news = await data.json(); 
      })
      .catch((err) => {
        console.log(err)
      });        // ...
  }
  
  showNews(newsElementId, count = 8) {
    let newsElement = document.getElementById(newsElementId);
    for(let newsItem of this.news.slice(0,count)) {
      let el = document.createElement('li');
      el.innerText = newsItem.title;
      newsElement.appendChild(el);
    }
  }

  async getAndShowNews(newsElementId) {
    // Wait for the fetchNews() call to complete...
    await this.fetchNews();
    // Show the news...
    this.showNews(newsElementId);
  }
}
    
n = new MyNews();
n.getAndShowNews('news');

<b>News</b>
<ol id='news'>
</ol>

Answer 4

构造函数的调用fetchnews不等待它。它只是为稍后将要解决的东西创造了诺言（例如，手柄）。您的显示的需要在fetchnews之后链接。另外，我会用async/等待为了清楚起见，

class MyNews {
  news = [];
  
  apiUrl = "https://jsonplaceholder.typicode.com/posts";
  
  constructor() {
    // this.news; - This statement does nothing
    // this.fetchNews(); - No need to call in constructor
  }
  
  fetchNews() {
    try {
      const data = await fetch(this.url)
      this.news = await data.json()
      console.log("A:",this.news.length); // i have results
    } catch (err) {
      console.log(err)
    }
  }
  
  showNews() {
    console.log("B:",this.news.length); // empty array
    
    return this.news;
  }
}
    

n = new MyNews();
n.fetchNews().then( () => n.showNews())
// OR
await n.fetchNews()
n.showNews()

我还将从fetchnews返回新闻，而不是保留为类成员

Answer 5

对你来说还可以吗？

class MyNews {
  
  apiUrl = "https://jsonplaceholder.typicode.com/posts";
  
  constructor() {
    this.news=[];
  }
  
  async fetchNews() {
  const response= await  fetch(this.apiUrl);
  const data = await response.json();
  this.news= data;
  console.log("A:",this.news.length);
  return data;
  }
  
  async showNews() {
    await this.fetchNews();
    console.log("B:",this.news.length); // empty array
    return this.news;
  }
}
    
async function app(){
  n = new MyNews();
  const news= await n.showNews();
  console.log("C:", news.length);
}
app();