Kuasai kemahiran praktikal untuk mendapatkan kod status HTTP dalam JavaScript

Petua praktikal: Untuk menguasai kaedah mendapatkan kod status HTTP dalam JavaScript, contoh kod khusus diperlukan

Pengenalan:
Dalam pembangunan web, interaksi data dengan bahagian belakang selalunya diperlukan. Dalam proses ini, adalah sangat penting untuk memahami kod status HTTP, yang boleh membantu kami menentukan sama ada permintaan itu berjaya dan mengendalikan situasi ralat. Artikel ini akan memperkenalkan cara mendapatkan kod status HTTP melalui JavaScript dan menyediakan contoh kod khusus untuk membantu pembaca menguasai teknik ini dengan cepat.

1. Gunakan objek XMLHttpRequest untuk mendapatkan kod status HTTP
XMLHttpRequest ialah objek yang digunakan untuk komunikasi tak segerak antara klien dan pelayan. Dalam JavaScript, kami boleh menggunakan objek XMLHttpRequest untuk menghantar permintaan HTTP dan mendapatkan kod status yang sepadan.

Contoh kod:

let xhr = new XMLHttpRequest();
xhr.open('GET', 'http://api.example.com/data', true);
xhr.onreadystatechange = function () {
  if (xhr.readyState === 4) { // 请求完成
    let status = xhr.status;
    console.log('HTTP状态码：', status);
  }
}
xhr.send();

Penghuraian:
Mula-mula, kami mencipta contoh objek XMLHttpRequest xhr. Kemudian, gunakan kaedah xhr.open() untuk menentukan jenis permintaan (GET, POST, dll.) dan URL yang diminta. Parameter ketiga ialah pengecam tak segerak Menetapkannya kepada benar bermakna menghantar permintaan secara tidak segerak.

Seterusnya, kami mengikat fungsi panggil balik pada acara onreadystatechange objek xhr. Fungsi panggil balik ini akan dicetuskan apabila keadaan objek xhr berubah. Apabila peristiwa onreadystatechange dicetuskan, kami mula-mula menentukan sama ada readyState objek xhr ialah 4, yang bermaksud permintaan telah selesai dan respons telah diterima.

Akhir sekali, kami mendapat kod status HTTP melalui atribut xhr.status dan mencetaknya pada konsol.

2. Gunakan API ambil untuk mendapatkan kod status HTTP
fetch API ialah API permintaan rangkaian moden berdasarkan Promise, yang menyediakan cara yang lebih ringkas dan fleksibel untuk berkomunikasi melalui rangkaian. Melalui API pengambilan, kami juga boleh mendapatkan kod status HTTP dengan mudah.

Contoh kod:

fetch('http://api.example.com/data')
  .then(response => {
    let status = response.status;
    console.log('HTTP状态码：', status);
  })
  .catch(error => {
    console.log('请求发生错误：', error);
  });

Analisis:
Mula-mula, kami menggunakan fungsi ambil untuk menghantar permintaan GET dan menghantar URL yang diminta sebagai parameter. Fungsi fetch mengembalikan objek Promise.

Seterusnya, kami menggunakan kaedah objek Promise untuk menentukan fungsi panggil balik. Apabila permintaan kembali, fungsi panggil balik akan dicetuskan dan menerima objek tindak balas sebagai parameter.

Dalam fungsi panggil balik, kami mendapat kod status HTTP melalui atribut response.status dan mencetaknya pada konsol.

Jika ralat berlaku dalam permintaan, kami boleh menangkap ralat melalui kaedah tangkapan dan mencetak maklumat ralat pada konsol.

3. Gunakan perpustakaan axios untuk mendapatkan kod status HTTP
axios ialah klien HTTP berasaskan Promise yang boleh digunakan dalam penyemak imbas dan Node.js. Ia menyediakan API yang mudah untuk menghantar permintaan HTTP dan memproses respons.

Contoh kod:

axios.get('http://api.example.com/data')
  .then(response => {
    let status = response.status;
    console.log('HTTP状态码：', status);
  })
  .catch(error => {
    console.log('请求发生错误：', error);
  });

Analisis:
Pertama, kami menggunakan kaedah get axios untuk menghantar permintaan GET dan menghantar URL yang diminta sebagai parameter. Kaedah get mengembalikan objek Promise.

Seterusnya, kami menggunakan kaedah objek Promise untuk menentukan fungsi panggil balik. Apabila permintaan kembali, fungsi panggil balik akan dicetuskan dan menerima objek tindak balas sebagai parameter.

Dalam fungsi panggil balik, kami mendapat kod status HTTP melalui atribut response.status dan mencetaknya pada konsol.

Jika ralat berlaku dalam permintaan, kami boleh menangkap ralat melalui kaedah tangkapan dan mencetak maklumat ralat pada konsol.

Kesimpulan:
Artikel ini memperkenalkan tiga kaedah biasa untuk mendapatkan kod status HTTP: menggunakan objek XMLHttpRequest, ambil API dan perpustakaan axios. Dengan menguasai kaedah ini dan dapat menggunakannya secara fleksibel, kami boleh menilai status permintaan dengan lebih tepat dan mengendalikan situasi ralat, meningkatkan kecekapan dan kualiti pembangunan web. Semoga artikel ini dapat memberi manfaat kepada pembaca.

Rujukan:

1. MDN Web Docs: XMLHttpRequest - https://developer.mozilla.org/en-US/docs/Web/API/XMLHttpRequest
2. MDN Web Docs: Fetch API - https://developer .org/en-US/docs/Web/API/Fetch_API
3. Axios - https://axios-http.com/

Atas ialah kandungan terperinci Kuasai kemahiran praktikal untuk mendapatkan kod status HTTP dalam JavaScript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!