Наскоро направих новия уебсайт Staytube в React и трябваше да направя Ajax-заявки. Въпросът беше как? И какъв е „правилният“ или „предпочитаният“ начин? Отговорът е зависи: Зависи от размера на вашето приложение, сложността на приложението ви, от инструментите, които използвате.
Тъй като самият аз съм начинаещ в React, избрах доста прост подход (без Flux/Redux), но реших, че ще направя малко описание.
API на YouTube
Staytube е прост уебсайт, посветен на страхотни пълнометражни концерти от YouTube. Проучвам концепцията за „Използване на YouTube като CMS“. Уебсайтът комуникира с плейлист в YouTube, като прави заявки с помощта на YouTube V3 API. Ще ви трябва API-ключ за извършване на повиквания към API на плейлиста.
Реагирайте
КАКТО може би знаете, React е преглед на библиотека и няма вградени мрежови функции. React изобразява компоненти, използвайки данни от props и състояние. Ако искате да използвате някои данни от сървъра, трябва да получите тези данни в подпорите или състоянието на вашите компоненти.
За извършване на Ajax повиквания ще трябва да използвате http/xhr библиотека. Реших да използвам Axios, обещан базиран http клиент.
Други инструменти, които можете да използвате:
- Xhr
- „Извличане“
- Суперагент
Инсталирайте Axios
npm install axios --save
Задаване на първоначалното състояние
В React можете да дефинирате първоначално състояние, като присвоите this.state в конструктора. Прочетете повече за първоначалното състояние
class LatestVideos extends Component {
constructor(props) {
super(props);
this.state = {
loading: false,
error: false,
videos: [],
nextpagetoken: '',
prevpagetoken: '',
};
this.fetchVideos = this.fetchVideos.bind(this);
this.nextPage = this.nextPage.bind(this);
this.prevPage = this.prevPage.bind(this);
}
/* … */
Вземи няколко видеоклипа
Добре, значи имам плейлист и трябва да изтегля няколко видеоклипа от него. URL адресът за извличане на моя плейлист изглежда така:
https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=30&pageToken=XXXXXXXXXXXXXXXXXX&playlistId=PLUIjiNV9YTmsGucmZPzRrVR1GSlmRQ6pk&key=XXXXXXXXXXXXXXXXXX&alt=json;
Монтаж
Използвам метода на жизнения цикъл на componentDidMount. Този метод ще бъде изпълнен, когато компонентът се „монтира“ (добавен към DOM) за първи път. Този метод се изпълнява само веднъж през живота на компонента. Прочетете повече за „Методите на жизнения цикъл на React“.
Имам компонент, който отговаря за извличането и изброяването на скорошни видеоклипове в моя плейлист. Малко опростено в този пример, но накратко изглежда така.
/* … */
componentDidMount() {
this.fetchVideos();
}
fetchVideos(direction) {
this.setState({
loading: true,
});
const url = `https://www.googleapis.com/youtube/v3/playlistItems?part=snippet&maxResults=30&pageToken=${token}&playlistId=PLUIjiNV9YTmsGucmZPzRrVR1GSlmRQ6pk&key=${apikey}&alt=json`;
axios.get(url)
.then(res => {
this.setState({
videos: res.data.items,
loading: false,
});
})
.catch(error => {
console.log(error);
});
}
/* … */
Рендиране
Сега този компонент отговаря за изобразяването на списъка с видеоклипове, като използва техните статични миниатюри, свързани с всеки видеоклип в YouTube.
renderVideos() {
return this.state.videos.map((video, index) => {
const videoClip = video.snippet.resourceId.videoId;
const image = 'https://placehold.it/480x360';
const alt = video.snippet.title;
if (video.snippet.hasOwnProperty('thumbnails')) {
image = video.snippet.thumbnails.high.url;
}
return (
<div key={ index }>
<Link to={ `/videos/${videoClip}` }>
<img src={ image } role="presentation" alt={ alt } />
<p>
{ alt }
</p>
</Link>
</div>
);
});
}
render() {
return (
<div>
{ this.state.loading ? <div className="loader"></div> : this.renderVideos() }
</div>
)
}
🤔 Нуждаете се от нещо по-задълбочено?
Andrew H Farmer написа отлична публикация „Най-добрите практики на React AJAX“», където обяснява четири добри начина за правене на Ajax-заявки с React.
Демонстрация?
💥 Вижте Staytube! Кодът е на Github, ако искате да знаете повече.
