javascript meminta pelayan dan menunggu respons

Dalam pembangunan aplikasi web, selalunya diperlukan untuk mendapatkan data daripada pelayan dan kemudian memaparkannya pada klien. JavaScript ialah salah satu bahasa yang paling popular dalam pembangunan web moden, dan menggunakan JavaScript pada klien untuk meminta pelayan dan menunggu respons adalah operasi biasa. Artikel ini menerangkan cara menggunakan JavaScript untuk menghantar permintaan HTTP dan menunggu pelayan membalas.

1. Hantar permintaan HTTP

Objek XMLHttpRequest digunakan dalam JavaScript untuk menghantar permintaan HTTP. Objek XMLHttpRequest ialah teknologi pertukaran data tak segerak yang paling biasa digunakan dalam aplikasi web moden. Ia membolehkan kami membuat permintaan tak segerak daripada JavaScript dan berinteraksi dengan pelayan. Berikut ialah contoh mudah:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'http://localhost:8080/data');
xhr.send();

Kod di atas menggunakan kaedah GET untuk meminta data daripada http://localhost:8080/data endpoint. Apabila kaedah send() dipanggil, permintaan dihantar ke pelayan. Kaedah ini tidak segerak dan oleh itu tidak menyekat pelaksanaan kod berikutnya.

2. Menunggu respons pelayan

Selepas menghantar permintaan, kami perlu menunggu respons pelayan. Kita boleh menggunakan pendengar untuk mengendalikan respons. Berikut ialah contoh mudah:

const xhr = new XMLHttpRequest();
xhr.onload = function() {
    if (xhr.status === 200) {
        console.log(xhr.responseText);
    } else {
        console.error('Error occurred');
    }
};
xhr.open('GET', 'http://localhost:8080/data');
xhr.send();

Kod di atas menghantar permintaan kepada pelayan dan mengendalikan respons apabila pelayan bertindak balas. Pendengar acara beban menyala apabila aplikasi menerima respons. Jika status respons ialah 200, cetak respons kepada konsol. Jika tidak, mesej ralat akan dikeluarkan.

3. Gunakan Promise untuk mengendalikan permintaan tak segerak

Contoh di atas menggunakan fungsi panggil balik untuk mengendalikan respons pelayan. Walau bagaimanapun, fungsi panggil balik boleh membawa kepada kod bersarang dan mengelirukan, jadi kami boleh menggunakan Promise untuk mengendalikan permintaan tak segerak. Berikut ialah contoh penggunaan Promise untuk mengendalikan permintaan tak segerak:

function makeRequest(method, url) {
    return new Promise(function(resolve, reject) {
        const xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.onload = function() {
            if (xhr.status === 200) {
                resolve(xhr.response);
            } else {
                reject(xhr.statusText);
            }
        };
        xhr.onerror = function() {
            reject(xhr.statusText);
        };
        xhr.send();
    });
}

Dalam kod di atas, fungsi makeRequest menerima kaedah HTTP dan URL sebagai parameter dan mengembalikan objek Promise. Objek ini mempunyai dua fungsi pengendali: menyelesaikan dan menolak. Apabila pelayan bertindak balas dengan jayanya, fungsi pengendali menyelesaikan mencetak respons kepada konsol. Apabila ralat berlaku, fungsi pengendali menolak akan mengeluarkan mesej ralat.

Begini cara menggunakan fungsi:

makeRequest('GET', 'http://localhost:8080/data')
    .then(function(response) {
        console.log(response);
    })
    .catch(function(error) {
        console.error(error);
    });

Kod di atas akan membuat permintaan HTTP GET dan memanggil fungsi pengendali jika pemprosesan berjaya atau gagal. Menulis kod tak segerak menggunakan gaya Promise lebih mudah difahami dan diselenggara daripada menggunakan fungsi panggil balik.

Kesimpulan

Menggunakan JavaScript untuk menghantar permintaan HTTP dan menunggu respons pelayan adalah kemahiran penting dalam aplikasi web. JavaScript menyediakan objek XMLHttpRequest untuk mengendalikan operasi ini dan tidak menyekat pembangun daripada menggunakan perpustakaan pihak ketiga untuk memudahkan kod. Artikel ini memperkenalkan contoh menggunakan JavaScript asli untuk menghantar permintaan HTTP dan menunggu respons pelayan dan menunjukkan cara menulis kod tak segerak menggunakan gaya Janji.

Atas ialah kandungan terperinci javascript meminta pelayan dan menunggu respons. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!