Mengalami ringkasan permintaan tak segerak JavaScript dan pemprosesan data dalam pembangunan bahagian hadapan

Dalam pembangunan bahagian hadapan, JavaScript bukan sahaja boleh mencapai kesan interaktif dan dinamik pada halaman, tetapi juga memperoleh dan mendapatkan data melalui permintaan tak segerak Memproses data. Dalam artikel ini, saya akan meringkaskan beberapa pengalaman dan petua apabila berurusan dengan permintaan dan data tak segerak.

1. Gunakan objek XMLHttpRequest untuk membuat permintaan tak segerak
Objek XMLHttpRequest ialah kaedah standard JavaScript untuk menghantar dan menerima permintaan HTTP. Apabila memproses permintaan tak segerak, anda boleh menghantar permintaan melalui objek ini dan memantau perubahan statusnya. Berikut ialah contoh mudah menggunakan objek XMLHttpRequest untuk menghantar permintaan GET:

var xhr = new XMLHttpRequest();
xhr.open("GET", "http://example.com/api/data", true);
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4 && xhr.status === 200) {
    var data = JSON.parse(xhr.responseText);
    // 處理返回的數(shù)據(jù)
  }
};
xhr.send();

Dalam kod di atas, kami mula-mula mencipta objek XMLHttpRequest, kemudian panggil kaedah terbuka untuk menetapkan kaedah permintaan dan URL, dan masukkan Boolean nilai benar untuk menunjukkan penggunaan Hantar permintaan secara tidak segerak. Seterusnya, kami menggunakan pendengar acara onreadystatechange untuk memantau perubahan status permintaan. Apabila readyState permintaan ialah 4 dan kod status ialah 200, ini bermakna permintaan itu berjaya, dan data yang dikembalikan boleh diperolehi melalui atribut responseText. Seterusnya, kami boleh menukar data yang dikembalikan kepada objek JavaScript melalui kaedah JSON.parse dan melakukan pemprosesan selanjutnya.

2. Gunakan API Ambil untuk permintaan tak segerak
Selain objek XMLHttpRequest, penyemak imbas moden juga menyediakan API Ambil baharu untuk mengendalikan permintaan tak segerak. API Fetch menyediakan fungsi yang lebih berkuasa dan fleksibel, menyokong Promise dan sintaks yang lebih mesra. Berikut ialah contoh menghantar permintaan GET menggunakan API Ambil:

fetch("http://example.com/api/data")
  .then(function(response) {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error("請求失敗");
    }
  })
  .then(function(data) {
    // 處理返回的數(shù)據(jù)
  })
  .catch(function(error) {
    // 處理異常
  });

Dalam kod di atas, kami memanggil kaedah ambil dan masukkan URL yang diminta. Kaedah pengambilan mengembalikan objek Janji, dan data pemulangan apabila permintaan berjaya boleh diproses melalui kaedah itu. Dalam kaedah itu, kami mula-mula menentukan sama ada kod status permintaan ialah 200. Jika ya, panggil kaedah response.json untuk menukar data yang dikembalikan kepada objek JavaScript. Seterusnya, kita boleh memproses data yang dikembalikan dalam kaedah kemudian. Jika permintaan gagal, pengecualian akan dilemparkan, yang boleh dikendalikan oleh kaedah tangkapan.

3. Teknik pemprosesan data
Apabila memproses data yang dikembalikan melalui permintaan tak segerak, terdapat beberapa teknik yang boleh meningkatkan kebolehbacaan dan prestasi kod:

1. Gunakan rentetan templat
   Rentetan templat ialah jenis yang boleh mengandungi pembolehubah dan ungkapan Satu rentetan literal bentuk. Apabila memproses data yang dikembalikan, anda boleh menggunakan rentetan templat untuk menggabungkan data dalam HTML atau format lain. Contohnya:

var name = "John";
var age = 30;
var html = `<div>Name: ${name}</div><div>Age: ${age}</div>`;

2. Menggunakan fungsi anak panah
   Fungsi anak panah ialah kaedah definisi fungsi baharu yang diperkenalkan dalam ES6 Ia boleh mentakrifkan fungsi dengan lebih ringkas dan mewarisi nilai konteks semasa. Apabila memproses data yang dikembalikan, anda boleh menggunakan fungsi anak panah untuk mengendalikan traversal dan pemetaan data. Contohnya:

var users = [{ name: "John", age: 30 }, { name: "Mary", age: 25 }];
var names = users.map(user => user.name);

3. Elakkan menyarangkan fungsi panggil balik terlalu dalam
   Menyarang fungsi panggil balik terlalu mendalam akan menyukarkan kod untuk dibaca dan diselenggara. Apabila memproses permintaan tak segerak, anda boleh menggunakan Promise atau async/wait untuk mengelakkan fungsi panggil balik bersarang terlalu mendalam. Contohnya:

fetch("http://example.com/api/data")
  .then(function(response) {
    if (response.ok) {
      return response.json();
    } else {
      throw new Error("請求失敗");
    }
  })
  .then(function(data) {
    return data.filter(user => user.age > 18);
  })
  .then(function(filteredData) {
    // 處理過濾后的數(shù)據(jù)
  })
  .catch(function(error) {
    // 處理異常
  });

Dalam kod di atas, kami memproses data secara bersiri melalui beberapa kaedah kemudian dan bukannya menyarangkan berbilang fungsi panggil balik.

4. Kesimpulan
Dalam pembangunan bahagian hadapan, permintaan tak segerak JavaScript dan pemprosesan data adalah bahagian penting. Dengan menguasai penggunaan objek XMLHttpRequest dan API Ambil, dan menggunakan beberapa teknik pemprosesan data, anda boleh meningkatkan kecekapan pembangunan dan meningkatkan pengalaman pengguna. Saya harap ringkasan pengalaman di atas akan membantu permintaan tak segerak dan pemprosesan data anda dalam pembangunan bahagian hadapan.

Atas ialah kandungan terperinci Ringkasan pengalaman dalam permintaan tak segerak JavaScript dan pemprosesan data dalam pembangunan bahagian hadapan. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!