Получение и рендеринг данных из Reddit/REST API
ОТКАЗ ОТ ОТВЕТСТВЕННОСТИ: Я дизайнер, пытаюсь больше узнать о javascript. Полегче со мной.
Я создаю сайт, который извлекает и отображает сообщения из API Reddit и отображает данные в макете CSS-сетки/стиля газеты. Похож на The Verge. Вот мой код:
const url = "https://www.reddit.com/r/upliftingnews.json?raw_json=1&limit=10"
fetch(url)
.then(res => res.json())
.then(res => res.data.children)
.then(res => res.map(post => ({
author: post.data.author,
link: post.data.url,
img: (typeof (post.data.preview) !== 'undefined') ? post.data.preview.images[0].source.url : null,
// img: post.data.thumbnail,
title: post.data.title
})))
.then(res => res.map(render))
.then(res => console.info(res))
// fetch(url)
// .then(response => response.json())
// .then(response => {
// console.info(response.data.children[1].data.preview.images[0].resolutions[1].url);
// });
const app = document.querySelector('#app');
const render = post => {
//console.info(post.data);
const node = document.createElement('div');
node.innerHTML = `
<h2>
<a href = "${post.link}">
<img src = "${post.img}" />
${post.title}
</a>
</h2>`;
app.appendChild(node);
}
Так что это отлично работает, но есть ли более эффективный/производительный способ, которым я должен это делать? Моя проблема:
- У меня нет никакого контроля над разметкой для отдельных отображаемых постов. Я мог бы использовать CSS и nth-child для индивидуального оформления постов, но это кажется неэффективным.
- Это не кажется очень производительным. HTML-код отображается через 1 или 2 секунды после загрузки страницы, что приводит к миганию пустого экрана.
Поиск в Google чего-либо, связанного с fetch api/рендерингом json, приводит к результатам, связанным с react/vue/angular/insertJSLibraryHere.
Должен ли я реально использовать один из этих фреймворков? Было бы проще/эффективнее, если бы я только что научился использовать React для этого? Я избегал изучения React/Vue, потому что мне очень сложно уложить все в голове, но, может быть, это хорошее место для начала?
Трудно найти ответы на этот вопрос, когда каждый результат поиска связан с каким-то JS-фреймворком. Поэтому я и спрашиваю здесь.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Базовый пример выборки в React.
Лучше сохранять ответ на вызов API в массиве состояний из метода жизненного цикла componentWillMount. Также я хотел бы использовать аксиомы вместо выборки.
Вот пример:
import axios from 'axios';
class someComponent extends React.Component {
constructor (props) {
super(props);
this.state = {
redditItems: [];
}
}
componentWillMount = () => {
axios.get(API_URL).then(res => {
this.setState({ redditItems: res.data.data.children });
}).catch(err => {
// CODE WHEN FAILS.
});
}
renderList = () => {
return this.state.reditItems.map((item, i) => (
<div key = { i }>
<p>{ item.data.url }</p>
<p>{ item.data.author }</p>
</div> // HOW YOU WANT TO DISPLAY YOUR ITEM
));
}
render = () => {
return (
<div>
{ this.renderList() }
</div>
)
}
}
Я надеюсь, что это поможет вам.
Извините за недопонимание. Вы определенно можете сделать это так же, как вы сделали с fetch API. Я предлагаю прочитать это (если вы еще этого не сделали). Что касается проблемы с производительностью, с которой вы столкнулись, всегда полезно отображать данные-заполнители перед вызовом API. Поэтому, когда он загружен, он будет заменен вашими реальными данными. В конце концов, я думаю, что неплохо было бы начать изучать такие фреймворки, как Vue или React. Вы удивитесь, насколько весело с ним работать.
Спасибо за ответ! Я думаю, вы отредактировали свой комментарий, но я переключил выборку в пользу async/await. Когда я найду время, я как следует посмотрю на реакцию.
Спасибо, но я не использую React. Мой вопрос заключается в том, лучше ли мне использовать для этого что-то вроде React или в этом нет необходимости, когда я могу сделать все это в vanilla JS.