Perkara yang perlu digunakan untuk pembangunan ajax bertindak balas

Pembangunan ajax bertindak balas boleh menggunakan: 1. Kaedah "$.ajax" jQuery; 2. Ambil API; latar belakang; 5. Minta perpustakaan.

Persekitaran pengendalian tutorial ini: sistem Windows 7, bertindak balas versi 17.0.1, komputer Dell G3.

5 penyelesaian untuk permintaan React AJAX

1. jQuery $.ajax

Ini adalah penyelesaian yang cepat dan kotor. Dalam versi lama tutorial React rasmi, mereka menggunakan jQuery $.ajax untuk menunjukkan cara mendapatkan data daripada pelayan. Jika anda baru mula belajar dan bermain dengan React, jQuery boleh menjimatkan banyak masa anda dalam memulakan dan membangun, kerana kita semua sangat biasa dengan jQuery. Ini ialah contoh jQuery yang melaksanakan AJAX:

loadCommentsFromServer: function() {
    $.ajax({
        url: this.props.url,
        dataType: 'json',
        cache: false,
        success: function(data) {
            this.setState({data: data});   // 注意这里
        }.bind(this),
        error: function(xhr, status, err) {
            console.error(this.props.url, status, err.toString());
        }.bind(this)
    });
}

P.S. Coretan kod ini diambil daripada versi lama tutorial rasmi

Ini menunjukkan cara menggunakan jQuery dalam komponen React $.ajax. Satu-satunya perkara yang memerlukan perhatian ialah cara memanggil success dalam panggilan balik this.setState(), iaitu cara mengemas kini keadaan melalui API React selepas jQuery berjaya menerima data.

Walau bagaimanapun, jQuery adalah yang besar yang mengandungi banyak fungsi, dan tidak masuk akal untuk memperkenalkan keseluruhan jQuery hanya untuk menggunakan fungsi AJAX (melainkan anda juga menggunakan jQuery untuk melakukan banyak perkara lain) . Jadi, apa yang perlu saya gunakan? Jawapannya ialah fetch API.

2 API Ambil

https://github.com/github/fetch

Fetch ialah API baharu, ringkas dan standard direka bentuk untuk menyatukan mekanisme komunikasi web dan menggantikan XMLHttpRequest. Ia telah disokong oleh penyemak imbas arus perdana, dan terdapat juga polyfill untuk penyemak imbas lama (Benz messed up: polyfill literal diterjemahkan sebagai alat pengisian, yang bermaksud bahawa pelayar lama pada asalnya tidak menyokong API JS baharu dan memperkenalkan sekeping kod js Ia akan disokong kemudiannya Kod js ini "mengisi" API untuk penyemak imbas lama Saya benar-benar tidak tahu bagaimana untuk menterjemah perkataan ini, tetapi saya rasa membiarkan perkataan asal tidak diterjemahkan akan memudahkannya. pembaca untuk memahami) . Jika anda menggunakan Node.js, anda juga boleh menggunakan node-fetch untuk mendayakan sokongan Node.js Fetch.

Jika coretan kod di atas menggunakan jQuery $.ajax ditukar kepada fetch, kod tersebut sepatutnya kelihatan seperti ini:

loadCommentsFromServer: function() {
    fetch(this.props.url).then(function(response){
        // 在这儿实现 setState
    });
}

Dalam beberapa tutorial React yang popular, anda boleh Temui fetch . Untuk mengetahui lebih lanjut tentang fetch, sila rujuk pautan berikut (semua dalam bahasa Inggeris):

• Mozilla
• David Walsh Blog
• Pembangun Google
• WHATWG

3 SuperAgent

https://. github.com/visionmedia/superagent

SuperAgent ialah perpustakaan API AJAX yang ringan, dilahirkan untuk kebolehbacaan dan fleksibiliti yang lebih baik. Jika atas sebab tertentu anda tidak mahu menggunakan fetch, maka SuperAgent hampir merupakan pilihan yang tidak dapat dielakkan. Penggunaan SuperAgent adalah lebih kurang seperti berikut:

loadCommentsFromServer: function() {
    request.get(this.props.url).end(function(err,res){
        // 在这儿实现 setState
    });
}

SuperAgent juga mempunyai versi Node.js dan API adalah sama. Jika anda menggunakan Node.js dan React untuk membangunkan aplikasi isomorfik (Benz kacau: pautan ini telah saya tambahkan untuk menjaga pemula) , anda boleh menggunakan sesuatu seperti webpack untuk membenamkan superagent dan Make ia berfungsi pada bahagian pelayar. Oleh kerana API bahagian penyemak imbas dan bahagian pelayan adalah sama, versi Node.jsnya boleh dijalankan pada penyemak imbas tanpa mengubah suai sebarang kod.

4 Axios

https://github.com/axios/axios

Axios ialah objek berasaskan janji (Benz pencerobohan : Pautan ini juga telah saya tambahkan) Klien HTTP terutamanya digunakan untuk memulakan permintaan ke latar belakang, dan ia juga mempunyai fungsi yang lebih terkawal dalam permintaan. . Seperti fetch dan superagent, ia menyokong kedua-dua penyemak imbas dan Node.js. Di samping itu, anda boleh menemui di laman utama Githubnya bahawa ia mempunyai banyak fungsi lanjutan yang berguna.

Ini ialah penggunaan umum Axios:

loadCommentsFromServer: function() {
    axios.get(this.props.url).then(function(response){
        // 在这儿实现 setState
    }).catch(function(error){
        // 处理请求出错的情况
    });
}

5 Permintaan

https://github.com/request/request<. 🎜 >

Jika saya tidak memperkenalkan perpustakaan permintaan ini, rasanya artikel ini tidak lengkap. Ini ialah perpustakaan JS yang mengejar reka bentuk minimalis dalam ideologi Ia mempunyai lebih daripada 12k bintang

di Github (Benz kacau: ia sudah mempunyai 16k bintang apabila saya menterjemah artikel ini) . Ia juga merupakan salah satu modul Node.js yang paling popular. Pergi ke halaman utama GitHubnya untuk mengetahui lebih lanjut.

Contoh penggunaan:

loadCommentsFromServer: function() {
    request(this.props.url, function(err, response, body){
        // 在这儿实现 setState
    });
}

[Cadangan berkaitan:

Tutorial video Redis]

Atas ialah kandungan terperinci Perkara yang perlu digunakan untuk pembangunan ajax bertindak balas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!