Cara menggunakan kaedah ambil dalam JavaScript

Penggunaan kaedah pengambilan dalam JavaScript

Dalam pembangunan web moden, interaksi data dengan pelayan adalah keperluan yang sangat biasa. Untuk memenuhi keperluan ini, JavaScript menyediakan kaedah pengambilan, iaitu API yang berkuasa dan mudah digunakan yang boleh membantu kami menghantar dan menerima permintaan HTTP.

Penggunaan asas kaedah pengambilan adalah seperti berikut:

fetch(url, options)
  .then(response => response.json())
  .then(data => {
    // 对返回的数据进行处理
  })
  .catch(error => {
    // 处理请求错误
  });

Dalam contoh ini, kaedah pengambilan menerima dua parameter: url dan pilihan. url ialah alamat untuk menghantar permintaan dan pilihan ialah parameter pilihan yang digunakan untuk mengkonfigurasi butiran permintaan, seperti kaedah permintaan, pengepala permintaan, dsb.

Kaedah ambil mengembalikan objek Promise Kami boleh mengendalikan respons yang berjaya melalui kaedah .then() dan mengendalikan ralat melalui kaedah .catch(). Dalam respons yang berjaya, kita boleh menggunakan kaedah response.json() untuk menghuraikan data yang dikembalikan ke dalam format JSON dan menghantar data yang dihuraikan ke kaedah .then() seterusnya.

Mari lihat contoh lengkap mendapatkan data daripada pelayan dengan menggunakan kaedah ambil dan memaparkannya dalam halaman web:

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => {
    const container = document.getElementById('data-container');
    data.forEach(item => {
      const listItem = document.createElement('li');
      listItem.innerText = item.title;
      container.appendChild(listItem);
    });
  })
  .catch(error => {
    console.error('请求错误:', error);
  });

Dalam contoh ini, kami menghantar permintaan GET ke https://api.example.com/data , dan kemudian gunakan kaedah response.json() untuk menghuraikan data respons ke dalam format JSON. Seterusnya, kami mengulangi tatasusunan data dan mencipta tajuk setiap item sebagai elemen li dan menambahkannya pada bekas dengan bekas data id.

Selain permintaan GET, kaedah pengambilan juga menyokong kaedah permintaan HTTP yang lain, seperti POST, PUT dan DELETE. Kita boleh menentukan kaedah permintaan dengan menetapkan medan kaedah dalam parameter pilihan. Sebagai contoh, jika anda ingin menghantar permintaan POST, anda boleh menulis seperti ini:

const options = {
  method: 'POST',
  body: JSON.stringify({ username: 'admin', password: '123456' }),
  headers: {
    'Content-Type': 'application/json'
  }
};

fetch('https://api.example.com/login', options)
  .then(response => {
    // 处理响应
  })
  .catch(error => {
    // 处理请求错误
  });

Dalam contoh ini, kami menentukan kaedah permintaan sebagai POST dalam parameter pilihan, dan menetapkan medan badan untuk menghantar data dalam format JSON. Selain itu, kami juga boleh menentukan pengepala permintaan dengan menetapkan medan pengepala.

Perlu diambil perhatian bahawa kaedah pengambilan hanya akan ditolak apabila ralat berlaku dalam permintaan rangkaian. Dalam erti kata lain, ia tidak secara automatik mengendalikan kod status ralat HTTP (seperti 404) sebagai ralat. Jika kami perlu mengendalikan kod status HTTP tertentu, kami boleh menentukannya dalam respons yang berjaya.

Untuk meringkaskan, kaedah pengambilan ialah cara yang sangat mudah untuk menghantar dan menerima permintaan HTTP dalam JavaScript. Ia menyokong pelbagai kaedah permintaan HTTP, boleh menetapkan butiran permintaan, dan juga menggunakan mekanisme Janji untuk menjadikan kod lebih ringkas dan boleh dibaca. Dengan menguasai penggunaan kaedah pengambilan, kami boleh berinteraksi dengan pelayan dengan lebih fleksibel dan menambah lebih banyak fungsi dan pengalaman interaktif pada aplikasi web.

(801 patah perkataan kesemuanya)

Atas ialah kandungan terperinci Cara menggunakan kaedah ambil dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!