Rumah > hujung hadapan web > tutorial js > Memahami Fungsi Panggilan Balik dengan Contoh Praktikal

Memahami Fungsi Panggilan Balik dengan Contoh Praktikal

王林
Lepaskan: 2024-07-19 12:21:28
asal
386 orang telah melayarinya

Understanding Callback Functions with a Practical Example

Bayangkan anda seorang chef dan anda mempunyai pembantu. Tugas anda adalah memasak makan malam, tetapi pertama sekali, anda perlu mendapatkan beberapa bahan istimewa dari kedai. Anda meminta pembantu anda pergi ke kedai, dan apabila mereka kembali, mereka memberitahu anda bahawa mereka mempunyai bahan supaya anda boleh terus memasak.

Apa yang Kami Perlukan:

  • Node.js dipasang pada komputer anda.
  • Pakej pengambilan nod, yang membantu kami mengambil data daripada internet.

Memasang Node.js dan node-fetch

Pertama, pastikan anda telah memasang Node.js. Jika tidak, anda boleh memuat turun dan memasangnya daripada nodejs.org.

Kemudian, buka terminal anda dan pasang pakej pengambilan nod dengan menjalankan arahan ini: npm install node-fetch

Contoh: Mengambil Data Sebenar Menggunakan Fungsi Panggilan Balik

Contoh berikut menunjukkan cara untuk mengambil data sebenar daripada API menggunakan fungsi panggil balik.

// Function that fetches data from the API and then calls the helper (callback)
const fetchData = async (callback) => {
  console.log('Fetching ingredients from the store...');
  try {
    const fetch = (await import("node-fetch")).default;
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    const data = await response.json();
    console.log('Ingredients have been fetched.');
    callback(data); // Calling the helper (callback) with the fetched ingredients
  } catch (error) {
    console.error('Error fetching ingredients:', error);
  }
};

// Implementing and passing the helper (callback) to fetchData
fetchData((data) => {
  console.log('Processing the fetched ingredients:', data);
});
Salin selepas log masuk

Penerangan Kod:

1/ Fungsi ambilData:

  • Fikirkan fungsi ini sebagai pembantu anda yang pergi ke kedai untuk mendapatkan bahan.
  • Fungsi ini tidak segerak (tak segerak), bermakna ia boleh menunggu operasi seperti mengambil data.
  • Ia mengambil data daripada URL https://jsonplaceholder.typicode.com/posts/1, seperti pergi ke kedai untuk mendapatkan ramuan istimewa.
  • Selepas berjaya mengambil data, ia menukarnya kepada format JSON, seperti kembali dari kedai dengan bahan-bahan.
  • Akhir sekali, ia memanggil pembantu (fungsi panggil balik) dengan data yang diambil.

2/ Fungsi Panggilan Balik:

  • Fungsi ini seperti anda, chef, menunggu bahan-bahan.
  • Setelah pembantu membawa bahan, chef (fungsi panggil balik) menggunakannya untuk meneruskan memasak.
  • Dalam kes kami, fungsi ini merekodkan data yang diambil ke konsol.

Menjalankan Kod

Buka terminal dalam Kod VS (atau gunakan baris arahan) dan navigasi ke direktori tempat fail fetchDataExample.js anda berada. Kemudian jalankan fail ini menggunakan Node.js dengan arahan: node fetchDataExample.js

Apa yang Anda Patut Lihat:

Apabila anda menjalankan kod ini, anda sepatutnya melihat sesuatu seperti ini:

Fetching ingredients from the store...
Ingredients have been fetched.
Processing the fetched ingredients: { userId: 1, id: 1, title: '...', body: '...' }
Salin selepas log masuk

Ringkasan:

  • Anda ialah chef yang memerlukan bahan untuk memasak.
  • Pembantu anda (fungsi panggil balik) pergi ke kedai untuk mengambil bahan-bahan (mengambil data daripada internet menggunakan node-fetch).
  • Pembantu membawa bahan-bahan dan memberitahu anda (panggil fungsi panggil balik dengan data yang diambil).
  • Anda menggunakan bahan-bahan ini dan teruskan memasak (memproses data yang diambil).

Atas ialah kandungan terperinci Memahami Fungsi Panggilan Balik dengan Contoh Praktikal. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan