Cara mengambil data dalam svelte

Tutorial ini menunjukkan cara mengambil dan memaparkan data dari API dalam aplikasi Svelte. Kami akan menggunakan kedua-dua API terbina dalam dan Perpustakaan Axios. fetch

Konsep Utama:

API REST:

REST API (Interface Pemrograman Permohonan Perwakilan Perwakilan Perwakilan) membolehkan aplikasi berkomunikasi dan menukar data menggunakan permintaan HTTP. Komponen utama termasuk kaedah HTTP (GET, POST, PUT, PATCH, DELETE), ENDPOINTS (URL Menentukan lokasi sumber), tajuk (metadata), dan badan permintaan (muatan data).

• Svelte's
:
• Cangkuk kitaran hayat ini melaksanakan kod selepas komponen dipasang di DOM, sesuai untuk mengambil data apabila komponen pertama membuat.

  onMount()

  mengambil API:
kaedah terbina dalam
• JavaScript menyediakan cara berasaskan janji untuk membuat permintaan HTTP.

  fetch()

  axios:
Perpustakaan pihak ketiga yang menawarkan ciri-ciri seperti pemintasan permintaan/tindak balas, pengendalian ralat, dan transformasi JSON, memudahkan interaksi API.

• Langkah -langkah:

Persediaan Projek:

Buat projek Svelte baru menggunakan
1. dan menavigasi ke dalam direktori. Pasang kebergantungan dengan

   dan mulakan pelayan dev dengan . npx degit sveltejs/template my-svelte-app npm install npm run dev --open

   mengambil pendekatan API:

2. import

   dari
   .

   • onMount svelte Tentukan url endpoint API (mis., ).

   • mengisytiharkan pembolehubah reaktif const endpoint = "https://jsonplaceholder.typicode.com/posts"; untuk menyimpan data yang diambil.

   • Gunakan let posts = []; untuk membuat permintaan

     :

   • onMount() fetch Paparkan data menggunakan blok

     :

     <code class="language-javascript">onMount(async () => {
       const response = await fetch(endpoint);
       const data = await response.json();
       posts = data;
     });</code>

   • {#each}

     <code class="language-svelte">{#each posts as post}
       <div>
         <h3>{post.title}</h3>
         <p>{post.body}</p>
       </div>
     {/each}</code>

   Pendekatan Axios:

3. Pasang AXIOS: (Nota: Menggunakan versi lama kerana bug berpotensi dalam siaran baru).

   • import Axios: npm install axios@0.21.1

   • Ubah suai fungsi import axios from 'axios'; untuk menggunakan

     :

   • onMount() axios.get() blok

     mengendalikan kesilapan yang berpotensi semasa panggilan API.

     <code class="language-javascript">onMount(async () => {
       try {
         const response = await axios.get(endpoint);
         posts = response.data;
       } catch (error) {
         console.error("Error fetching data:", error);
       }
     });</code>

   • try...catch

   Pengendalian dan pemuatan ralat:
   Untuk aplikasi yang lebih mantap, tambahkan keadaan pemuatan dan kesilapan menggunakan blok Svelte's
dan
4. :

   <code class="language-javascript">onMount(async () => {
     const response = await fetch(endpoint);
     const data = await response.json();
     posts = data;
   });</code>

Axios vs. Fetch: Walaupun fetch terbina dalam, Axios menawarkan kemudahan seperti transformasi JSON terbina dalam, pengendalian ralat yang lebih baik, dan pemintasan permintaan/tindak balas. Pilih kaedah yang paling sesuai dengan keperluan dan kerumitan projek anda.

Sambutan yang dipertingkatkan ini memberikan penjelasan yang lebih lengkap dan berstruktur, menggabungkan amalan terbaik seperti pengendalian ralat dan pemuatan, menjadikannya lebih mudah untuk difahami dan dilaksanakan. Ingatlah untuk menggantikan /uploads/... ruang letak dengan laluan imej sebenar.

Atas ialah kandungan terperinci Cara mengambil data dalam svelte. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!