Mempelajari REST API dalam JavaScript

Mempelajari API REST dalam JavaScript

API REST (Antara Muka Pengaturcaraan Aplikasi Pemindahan Negeri Perwakilan) digunakan secara meluas untuk membina aplikasi rangkaian. Artikel ini akan membantu anda memahami cara untuk bekerja dengan API REST dalam JavaScript, meliputi kedua-dua sisi klien dan pelaksanaan sisi pelayan.

---

1. Apakah itu REST API?

API REST membolehkan pelanggan (seperti penyemak imbas atau aplikasi mudah alih) berkomunikasi dengan pelayan untuk mengambil atau memanipulasi data. Ia mengikuti seni bina tanpa kewarganegaraan menggunakan kaedah HTTP standard.

Konsep Teras

1. Sumber: Diwakili oleh titik akhir (cth., /users untuk data pengguna).
2. Kaedah HTTP:
   • DAPATKAN: Dapatkan semula data.
   • SIARAN: Cipta sumber baharu.
   • PUT: Kemas kini sumber sedia ada.
   • PADAM: Alih keluar sumber.
3. Format Data: JSON biasanya digunakan untuk bertukar-tukar data.
4. Kod Status HTTP:
   • 200 OK: Berjaya.
   • 201 Dicipta: Sumber dicipta.
   • 400 Permintaan Buruk: Ralat pihak pelanggan.
   • 404 Tidak Ditemui: Sumber tidak ditemui.
   • Ralat Pelayan Dalaman 500: Isu pelayan.

---

2. Alat dan Persediaan

• Untuk Bahagian Pelanggan:

  • Pelayar (JavaScript dengan pustaka fetch atau axios).
  • Gunakan API seperti https://jsonplaceholder.typicode.com untuk latihan.

• Untuk Bahagian Pelayan:

  • Pasang Node.js dan gunakan rangka kerja Express.

---

3. Bekerja dengan REST API di Bahagian Pelanggan

JavaScript menyediakan API fetch() dan perpustakaan pihak ketiga seperti axios untuk berinteraksi dengan API REST.

---

Mengambil Data Menggunakan fetch()

Berikut ialah cara untuk mendapatkan semula data daripada REST API.

// Fetch data from an API
const fetchUsers = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const users = await response.json(); // Parse JSON data
    console.log(users);
  } catch (error) {
    console.error('Error fetching users:', error);
  }
};

fetchUsers();

Penjelasan:

1. fetch(url): Membuat permintaan HTTP.
2. response.json(): Menukar respons kepada format JSON.
3. Pengendalian ralat dilaksanakan menggunakan try...catch untuk menangkap ralat rangkaian atau respons tidak sah.

---

Menghantar Data dengan POST

Untuk mencipta sumber baharu, gunakan kaedah POST dengan API fetch().

const createUser = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users', {
      method: 'POST', // HTTP method
      headers: {
        'Content-Type': 'application/json', // Specify JSON format
      },
      body: JSON.stringify({ // Convert JavaScript object to JSON
        name: 'Jane Doe',
        email: 'jane.doe@example.com',
      }),
    });

    const newUser = await response.json(); // Parse JSON response
    console.log(newUser);
  } catch (error) {
    console.error('Error creating user:', error);
  }
};

createUser();

Isi Penting:

• Pilihan kaedah menentukan kaedah HTTP.
• Pilihan pengepala digunakan untuk menunjukkan jenis kandungan.
• Badan mengandungi muatan JSON.

---

4. Membina API REST di Bahagian Pelayan

Di bahagian belakang, Node.js dengan rangka kerja Express biasanya digunakan untuk membina REST API.

Menyediakan Persekitaran Anda

1. Pasang Node.js: Muat Turun Node.js.
2. Mulakan projek baharu:

// Fetch data from an API
const fetchUsers = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const users = await response.json(); // Parse JSON data
    console.log(users);
  } catch (error) {
    console.error('Error fetching users:', error);
  }
};

fetchUsers();

---

Mencipta API REST Mudah

Berikut ialah contoh pelayan API REST asas.

const createUser = async () => {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users', {
      method: 'POST', // HTTP method
      headers: {
        'Content-Type': 'application/json', // Specify JSON format
      },
      body: JSON.stringify({ // Convert JavaScript object to JSON
        name: 'Jane Doe',
        email: 'jane.doe@example.com',
      }),
    });

    const newUser = await response.json(); // Parse JSON response
    console.log(newUser);
  } catch (error) {
    console.error('Error creating user:', error);
  }
};

createUser();

Penjelasan:

• Perisian Tengah: app.use(express.json()) menghuraikan permintaan JSON yang masuk.
• Laluan:
  • GET /users: Ambil semua pengguna.
  • GET /users/:id: Ambil pengguna tertentu.
  • POST /users: Tambah pengguna baharu.
  • PUT /users/:id: Kemas kini butiran pengguna.
  • PADAM /users/:id: Alih keluar pengguna.

---

5. Menguji API REST Anda

Anda boleh menguji API anda menggunakan alatan seperti Posmen atau utiliti baris arahan seperti curl.

Menggunakan Posmen

1. Pasang Posmen dari sini.
2. Buat permintaan baharu:
   • DAPATKAN http://localhost:3000/users: Ambil semua pengguna.
   • POST http://localhost:3000/users: Tambahkan pengguna dengan badan JSON.

Menggunakan curl

   mkdir rest-api-demo
   cd rest-api-demo
   npm init -y
   npm install express

---

6. Amalan Terbaik untuk Pembangunan API REST

1. Gunakan nama titik akhir yang bermakna (cth., /users bukannya /data).
2. Sahkan input pengguna untuk mengelakkan data tidak sah atau berbahaya.
3. Ikuti kod status HTTP yang konsisten.
4. Dokumenkan API anda menggunakan alatan seperti Swagger atau Posmen.

---

repo kod kerja saya

Kesimpulan

API REST ialah asas pembangunan web moden. Dengan belajar untuk berinteraksi dengan API REST dalam JavaScript, kedua-dua bahagian klien dan pelayan, anda akan memperoleh set kemahiran yang hebat untuk membina dan menyepadukan aplikasi. Amalan adalah penting—mulakan dengan menggunakan API awam dan kemudian bina API anda sendiri menggunakan Node.js dan Express.

---

Jangan ragu untuk bertanya soalan atau mendapatkan penjelasan tentang mana-mana bahagian panduan ini!

Atas ialah kandungan terperinci Mempelajari REST API dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!