Mengambil data dalam aplikasi React anda

React, perpustakaan terkemuka untuk membina aplikasi web dinamik, memberi tumpuan terutamanya pada lapisan paparan dalam seni bina MVC. Tutorial ini meneroka aspek asas pembangunan web: mengambil dan memaparkan data dalam aplikasi React. Kami akan mengkaji pelbagai strategi pengambilan data, kelebihan dan kekurangan mereka, dan amalan terbaik untuk mengintegrasikannya ke dalam projek anda. Pada akhirnya, anda akan memahami bagaimana untuk menguruskan pengambilan data dengan cekap dalam aplikasi React anda.

Bermula

mari kita mulakan dengan membuat aplikasi React Basic menggunakan

: create-react-app

create-react-app react-data-fetcher

Perintah ini menjana struktur projek yang komprehensif. Rujuk fail

untuk maklumat terperinci mengenai README. create-react-app

pelayan mudah

Untuk tujuan demonstrasi, pelayan mudah (aplikasi Python 3 menggunakan rangka kerja dan redis untuk ketekunan data) menyediakan API jauh untuk mengambil sebut harga. Kesederhanaan API membolehkan kita memberi tumpuan kepada proses pengambilan data React.

hug komponen

komponen fungsional QuoteList menjadikan senarai petikan yang dilancarkan, menerima pelbagai rentetan sebagai input:

QuoteList Komponen ini adalah kanak -kanak komponen utama

, di mana rendering bersyarat digunakan berdasarkan status pengambilan data.

import React from 'react';

const QuoteList = ({ quotes }) => (
  quotes.map(quote => 

{quote}

) ); export default QuoteList;

pengambilan data dengan axios App

fungsi

, menggunakan AXIOS, menunjukkan pengambilan data tak segerak:

fetchQuotes fungsi

mempamerkan permintaan pos mudah menggunakan AXIOS:

fetchQuotes = () => {
    this.setState({ ...this.state, isFetching: true });
    axios.get(QUOTE_SERVICE_URL)
      .then(response => this.setState({ quotes: response.data, isFetching: false }))
      .catch(e => console.log(e));
};

handleSubmit Axios vs. Ambil: Perbandingan

handleSubmit = event => {
    axios.post(this.props.quote_service_url, { 'quote': this.state.quote })
      .then(r => console.log(r))
      .catch(e => console.log(e));
    event.preventDefault();
};

Bahagian ini menyoroti perbezaan utama antara AXIOS dan API

asli. AXIOS memudahkan transformasi data JSON dan menawarkan ciri-ciri terbina dalam seperti pengendalian masa tamat permintaan dan pemintas HTTP, yang tidak mempunyai

. Pemintas Axios menyediakan mekanisme terpusat untuk mengubah suai permintaan dan respons, meningkatkan penyelenggaraan kod. Contohnya menunjukkan cara menggunakan pemintas axios. Tutorial ini juga membezakan pengendalian permintaan serentak dengan menggunakan

dan fetch dengan fetch. axios.all Promise.all Kesimpulan fetch

Tutorial ini meliputi data asynchronous yang diambil dalam React, termasuk kaedah kitaran hayat, pengundian, pelaporan kemajuan, dan pengendalian ralat. Perbandingan Axios dan API

menyerlahkan kekuatan dan kelemahan masing -masing. Maklumat yang diberikan memberi anda kuasa untuk mengurus pengambilan data dengan berkesan dalam aplikasi React anda.

fetch Siaran ini dikemas kini dengan sumbangan dari Divya Dev.

Atas ialah kandungan terperinci Mengambil data dalam aplikasi React anda. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!