Pembangunan web moden sangat bergantung pada permintaan Ajax. Walaupun objek

asli menyediakan fungsi ini, ramai pemaju lebih suka menggunakan perpustakaan seperti jQuery untuk pengendalian Ajax yang lebih mudah. Artikel ini membandingkan dua alternatif yang popular: Superagent dan Axios, menunjukkan keupayaan mereka melalui permintaan kepada perkhidmatan HTTP sampel. XMLHttpRequest

Perbezaan utama:

Kedua -dua superagent dan axios menawarkan keupayaan ajax tak segerak, yang membolehkan kod lain dilaksanakan secara serentak.
Axios memanfaatkan janji -janji, menjajarkan dengan amalan JavaScript standard, sementara Superagent menggunakan pendekatan yang berbeza. Ini menjadikan Axios lebih lancar dengan perpustakaan berasaskan janji lain.
kedua-duanya sangat sesuai untuk mendapatkan asas, pos, dan meletakkan permintaan kepada API tetapi kekurangan ciri seperti memuat naik pemantauan kemajuan yang terdapat dalam moden
• . XMLHttpRequest
Walaupun fungsional yang sama, penulis mendapati API Superagent lebih intuitif. Walau bagaimanapun, jika integrasi janji adalah penting, Axios adalah pilihan pilihan.
• tetap menjadi pilihan yang sesuai untuk pemaju yang selesa menguruskan keserasian pelayar atau mensasarkan pelayar moden sahaja. XMLHttpRequest

Pengenalan Perpustakaan:

menyokong kedua -dua permintaan segerak dan tidak segerak. Oleh kerana JavaScript adalah satu-satunya, Permintaan Segerak Blok pelaksanaan, membuat permintaan Asynchronous pilihan praktikal. Kedua -dua Axios dan Superagent secara eksklusif melakukan permintaan tak segerak. Kerana permintaan itu berlaku di latar belakang, respons tidak tersedia dengan segera. Fungsi panggil balik mengendalikan respons sebaik sahaja ia diterima. XMLHttpRequest

Axios menggunakan janji untuk menguruskan proses ini, menawarkan integrasi yang lebih baik dengan kod asynchronous lain. API Superagent tidak mematuhi corak janji standard. Ini menjadikan Axios pilihan yang lebih mantap apabila bekerja dengan pelbagai perpustakaan atau janji tersuai. Superagent, bagaimanapun, mempunyai pengiktirafan yang lebih luas dan ekosistem plugin yang kecil tetapi berguna (mis., Untuk awalan URL).

Kedua -dua perpustakaan cemerlang dalam interaksi API asas (mendapatkan, pos, meletakkan), tetapi kekurangan ciri -ciri canggih seperti memuat naik pengesanan kemajuan yang terdapat dalam moden

. Manfaat utama mereka terletak pada API yang ringkas dan berantai untuk konfigurasi dan pelaksanaan permintaan. XMLHttpRequest

Pemasangan:

tidak memerlukan pemasangan; Ia dibina dalam pelayar moden (IE8 dan kemudian). Superagent adalah modul NPM, yang memerlukan NPM (disertakan dengan Node.js/io.js) dan alat pembungkusan sisi klien seperti Browserify. Axios boleh didapati sebagai modul NPM, modul AMD, dan fail JavaScript yang berdiri sendiri. XMLHttpRequest

Contoh API (Pengurusan Pesanan Bakery):

Contoh ini menggunakan API Pengurusan Pesanan Bakery Hypothetical:

• GET /orders?start=YYYY-MM-DD&end=YYYY-MM-DD : mengambil pesanan dalam julat tarikh.
• post /orders : mencipta pesanan baru.

Data ditukar dalam format JSON. Sebagai contoh, untuk memerintahkan 3 coklat dan 5 kek lemon untuk penghantaran pada 10 Mac (pesanan ditempatkan pada 4 Mei):

{
  "chocolate": "3",
  "lemon": "5",
  "delivery": "2015-03-10",
  "placed": "2015-03-04"
}

Mewujudkan pesanan baru:

Ini memerlukan menentukan kaedah HTTP (POST), URL (/orders), permintaan badan (butiran pesanan), dan jenis kandungan (). application/json

• Superagent:

var request = require('superagent');

request.post('/orders/')
  .send({'chocolate': 2, 'placed': '2015-04-26'})
  .type('application/json')
  .accept('json')
  .end(function(err, res) {
    if (err) {
      console.log('Error!');
    } else {
      console.log(res.body);
    }
  });

• axios:

axios.post(
  '/orders/',
  {
    chocolate: 2,
    placed: '2015-04-26'
  },
  {
    headers: {
      'Content-type': 'application/json',
      'Accept': 'application/json'
    }
  }
)
  .then(function(response) {
    console.log(response.data);
  })
  .catch(function(response) {
    console.log('Error!');
  });

• xmlhttprequest:

var xhr = new XMLHttpRequest();
xhr.open('POST', '/orders/', true);
xhr.setRequestHeader('Content-type', 'application/json');
xhr.setRequestHeader('Accept', 'application/json');
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(xhr.response);
  } else {
    console.log('Error!');
  }
};
xhr.send(JSON.stringify({chocolate: 2, placed: '2015-04-26'}));

mengambil pesanan mengikut julat tarikh:

Ini melibatkan menambahkan parameter pertanyaan (

dan start). end

• Superagent:

request.get('/orders')
  .query({start: '2015-04-22', end: '2015-04-29'})
  .accept('json')
  .end(function(err, res) {
    // Handle error and response
  });

• axios:

axios.get(
  '/orders',
  {
    headers: {
      'Accept': 'application/json'
    },
    params: {
      start: '2015-04-22',
      end: '2015-04-29'
    }
  }
);

• xmlhttprequest:

var xhr = new XMLHttpRequest();
xhr.open('GET', '/orders?start=' + encodeURIComponent('2015-04-22') + '&end=' + encodeURIComponent('2015-04-29'), true);
// ...rest of the code

Cadangan dan kesimpulan: Axios dan superagent menawarkan fungsi yang sama, dengan pendekatan berasaskan janji Axios menjadi pembezaan utama. Superagent menyediakan API yang lebih diselaraskan, tetapi pematuhan Axios untuk menjanjikan menjadikannya lebih serba boleh.

tetap menjadi pilihan yang sah untuk pemaju yang selesa menguruskan nuansa khusus pelayar. Pilihan bergantung kepada keperluan projek dan keutamaan pemaju. Repositori GitHub (pautan tidak disediakan dalam input) mungkin mengandungi contoh kod lengkap. Selebihnya teks input terdiri daripada soalan dan jawapan yang sering ditanya yang tidak termasuk dalam output ini untuk keringkasan.

Atas ialah kandungan terperinci Perbandingan perpustakaan HTTP JavaScript untuk penyemak imbas. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!